精华内容
下载资源
问答
  • 如何为移动开发选择技术栈

    万次阅读 2019-07-21 18:08:01
    如何选择移动应用开发技术栈 选择合适的技术栈是移动开发领域最关键的决策之一。你选择的技术栈将为你开发的移动应用提供基本的功能、可拓展和维护性。选择技术栈时应该注意项目的类型、预期投入市场的时间和创意...

    感谢内容提供者:金牛区吴迪软件开发工作室

    今天就来聊一聊
    如何选择移动应用开发的技术栈
    在这里插入图片描述
    选择合适的技术栈是移动开发领域最关键的决策之一。你选择的技术栈将为你开发的移动应用提供基本的功能、可拓展和维护性。选择技术栈时应该注意项目的类型、预期投入市场的时间和创意的可行性。

    原则上来说,选择何种技术栈取决于产品的设计目标。例如,跨平台方法对于初创公司是一个很好的解决方案,而原生开发适合构建具有出色性能的复杂移动应用。

    对于缺乏技术背景的客户来说,想要全面了解新产品开发流程的所有功能和特性可能会很困难。如果我们并不清楚该使用哪种技术栈,这时候还要构建产品的详细规范就会是件麻烦事。

    具体来说,我们应该为应用开发选择哪种技术栈?或者为什么某些编程语言(以及工具包)比另一种更好?

    为了解答这些疑惑,本文将介绍多种用来组织和构建移动应用的方法。我们将讨论原生、混合、跨平台开发以及PWA方法,探讨它们技术特性和优缺点。

    还可参阅 “怎样为web应用开发选择技术栈”:

    https://2muchcoffee.com/blog/how-to-choose-a-technology-stack-for-web-app-development/
    在这里插入图片描述

    原生开发:

    如今最常见的开发方法就是原生应用开发。需要注意的是Android 和 IOS 的原生开发技术各有不同。原生应用开发提供完整的设备集成、出色的用户体验以及较高的安全等级。基于原生方法开发的应用响应迅速、性能出色。考虑到分别为Android 和 IOS 开发各自独立的原生应用可能带来高昂的成本和漫长的开发周期,你可能需要聘请更多具有相应技能的开发人员,这也是开发流程成本投入的一部分。


    Android技术栈:

    Android技术栈可以使用 Java 或 Kotlin 编程语言,最佳的开发环境则是 Android Studio。

    编程语言:

    • Java:谈到 Android 技术栈时,人们首先想到的就是Java。它是一种基于类的面向对象编程语言,拥有大量库和工具可以简化开发工作。Java拥有一系列核心功能,支持自动内存管理,可移植且可拓展,可用来构建高质量的移动应用。此外Java还拥有庞大的开源生态系统。虽然有人批评这种语言速度缓慢并占用大量内存,但Java的可拓展性和稳健性使其成为开发复杂移动应用时的首选。
    • Kotlin:这是一种非常新的语言,可以让开发流程更简洁。Kotlin是开源语言,具有许多拓展功能和优势,诸如懒加载、减少代码bug和错误的助手等,他还提供了完整的Java兼容性。

    工具包:

    • Android Studio: 这种开发环境提供了代码编辑和性能监测工具,可以打造灵活的构建系统。开发者可以使用它来创建创意独特、品质出色的应用。

    IOS技术栈:

    iOS 的原生应用开发使用 Objective C 或 Swift 编程语言,以及 Apple Xcode 开发工具包。

    编程语言:

    • Objective C:使用这种简洁的编程语言就可以利用苹果的众多技术了。开发者可以轻松使用它的私有 API 和富有表现力的消息语法,实现动态运行时环境和面向对象的功能。
    • Swift:它是一种更具功能性的编程语言。它支持文本字符串和数据的内联操作,错误率更低。此外,Swift 具有直接上传到内存的动态库,使应用更加瘦身,同时提升了应用性能。

    工具包:

    • Apple Xcode:这个功能齐全的开发环境可以用来创建移动应用和桌面应用。Xcode 拥有用于构建用户界面的图形编辑器、可以修复任何错误的工具、集成文档以及对 Git 存储库的集成支持。

    原生开发的优势:
    1. 出色的用户体验
    2. 完整的设备集成
    3. 高速接口
    4. 相应迅速
    5. 非常安全
    原生开发的劣势:
    1. 只支持一个平台
    2. 开发成本高昂
    3. 需要雇佣更多开发人员
    4. 漫长的开发周期
      在这里插入图片描述


    混合开发:

    混合移动应用开发使用标准的Web技术和工具,诸如HTML 、 CSS 、JavaScript等。包装在原生壳中的代码库被视为一个常规应用来运行。混合方法使用原生浏览器呈现引擎,基于 WebView 控件以全屏格式呈现 HTML 和 JavaScript 文件。换句话说,它是包装在原生移动容器内的网页。这些应用的功能与网站类似,准确来说是介于应用和浏览器呈现的页面之间。显然,混合应用的宗旨是单个应用就可用于 Android、iPhone 和 Windows 等多种平台。

    混合开发易于构建和维护。此外它可以节省你的成本投入,因为你只需为所有平台构建一个应用就够了。反过来说,它的缺点在于缺乏原生特性,交互也比较缓慢。

    编程语言:HTML5、CSS3、JavaScript

    混合应用开发兼顾了 Web 开发的快节奏与原生应用开发的用户体验,前者源于其使用的一系列标准 Web 技术,实现后者则需要使用下面这些框架。

    框架:

    Ionic 和 Apache Cordova:Ionic 是一个基于 Angular 的框架,可以创建强大的多功能应用。它可以提供基础的原生功能,并使应用在不同的操作系统和设备上运行。Ionic 为开发流程提供了丰富和稳健的支持,并加快了整个流程,使开发者无须从头开始编写代码。Apache Cordova 是 Ionic 的良好补充,它是一个基于 Web 的框架,帮助开发者使用 HTML 构建移动应用。在它们的帮助下,开发者可以使用各种 Web 技术来创建 iOS、Android 和 Windows 的原生应用。

    混合应用开发的优势:
    • 支持所有平台
    • 开发成本低廉
    • 无需雇佣额外的开发人员
    • 缩短开发周期
    • 较好的用户体验
    • 易于构建和维护
    混合应用开发的劣势:
    1. 安全性略低
    2. 较慢的页面
    3. 缺乏原生功能
    4. 难以访问设备硬件和操作系统的专属功能
      在这里插入图片描述


    跨平台开发

    跨平台移动应用开发与混合开发的区别在于,前者不使用 WebView 控件来呈现 HTML 和 JavaScript 文件。跨平台开发会创建在多个平台(包括 Android 和 iOS)上共享的代码库,从而节约大量时间和金钱。

    用于开发跨平台应用的技术包括:

    React Native框架和JavaScript/TypeScript编程语言

    React Native 是一个 JavaScript 框架,用来在 iOS 和 Android 上编写体验非常接近原生的移动应用。React Native 使用与常规 iOS 和 Android 应用相同的基础 UI 构建块。React Native 引入了一种新颖、激进且功能强大的方法来构建用户界面。使用 React Native 时你的应用 UI 完全是原生的。这类应用的典型例子就是 Instagram 和 Skype。你还可以使用 TypeScript 语言来构建跨平台应用。Typescript 提供了最新的 JavaScript 功能,用它编写 React 组件时可以更容易发现常见的错误。

    NativeScript框架和JavaScript/TypeScript编程语言

    你可以使用 NativeScript 在 iOS 和 Android 上开发完全原生的应用。它基于 JavaScript 语言,还支持 Angular 和 Vue JavaScript 框架。

    跨平台应用开发的优势
    1. 低廉的开发成本
    2. 无需雇佣额外的开发人员
    3. 代码可复用
    4. 支持所有平台
    5. 易于启动和更新开发工作
    6. 平台覆盖
    跨平台应用开发的劣势
    1. 相当差的用户体验
    2. 安全性略低
    3. 开发周期较长
    4. 集成问题
    5. 只支持有限的设备功能
    6. 性能损失
    7. 缺乏灵活性

    在这里插入图片描述



    移动平台的Web应用开发

    谈到移动应用开发就一定会提到渐进 Web 应用(Progressive Web App,PWA)开发。它提供的功能与节约时间的优势赢得了越来越多开发者的认同。本质上来说,当网站演变为移动应用时,响应式网页设计(在移动触摸屏上浏览网页)也就演变为 PWA 了。换句话说,PWA 就是具有移动应用功能的网页。PWA 支持离线工作,可以推送通知。总之,PWA 是一种获得卓越移动应用体验的新方式,这种体验可靠、经过优化并可完全在 Web 端访问。

    通过 PWA,你可以使用现代 Web 技术来提供快速、引人入胜且可靠的移动 Web 体验,非常适合个人和企业用户。

    对于 PWA 开发,建议使用:

    Angular/lonic框架和HTML、CSS、JavaScript编程语言

    Angular 是一种轻松开发原生和渐进式 Web 应用的好方法。它使用对用户友好的功能和优秀的 UI 元素构建应用。Angular 可以在缓慢或不可靠的网络连接上保障应用的终端用户体验,同时最大限度地减少不得不提供过期内容的风险。

    移动平台的Web应用开发优势
    1. 低廉的开发成本
    2. 高度安全
    3. 缩短开发周期
    4. 无需雇佣额外的开发人员
    5. 较好的用户体验
    6. 出色的性能
    7. 支持所有平台
    8. 相应迅速
    移动平台的Web应用开发劣势
    1. 离线支持局限较大
    2. 耗电较快
    3. 并非所有设备都支持完整的PWA功能

    在这里插入图片描述



    总结:

    为移动应用开发选择合适的技术是迈向成功或失败的关键一步。本文重点介绍移动应用开发的不同方法,并讨论了原生、混合、跨平台开发以及 PWA 方法。

    原生开发 能提供出色的用户体验,但可能非常昂贵且耗时。具体的原生开发技术栈则取决于移动设备的操作系统。

    混合移动应用 支持所有平台。这种方法结合了标准的 Web 技术和工具,如 HTML、CSS 和 JavaScript 等;而代码库包装在原生壳中,作为常规应用运行。

    跨平台开发 使用可在所有平台上共享的可复用代码。这种方法可以节省大量的时间和金钱,同时构建外观和体验接近原生的应用。

    渐进 Web 应用开发 是开发具有移动应用功能的网页。其功能特性和节约时间的优势赢得了众多开发者的支持。

    请记住,构建移动应用没有最佳方案可言。一个原则就是,根据产品的设计目标来选择技术栈。

    展开全文
  • 在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的。 Chrome扩展程序商店里就提供了这样一款应用:wappalyzer: 安装后,打开某个你想研究的网站,点击Chrome浏览器工具栏这个小按钮,...

    对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue。在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的。

    Chrome扩展程序商店里就提供了这样一款应用:wappalyzer:

    安装后,打开某个你想研究的网站,点击Chrome浏览器工具栏这个小按钮,即可召唤出Wappalyzer的页面。

    下面是用这个介绍的Chrome扩展应用Wappalyzer查看到的一些互联网公司的网站的技术栈。

    百度:用了SWFObject和jQuery。

    京东:用了webpack,jQuery。京东的jQuery版本比百度低不少啊。

    github: 服务器用的Tengine,JavaScript库用的Zepto。

    Github:编程语言用的Ruby,有自己的CDN:Github pages。Web框架:Ruby on Rails。还用了Google用于报表处理的服务:Google Analytics。

    SAP的官网:编程语言为Java,前端也用的jQuery。因为和Facebook做了集成,所以用了Facebook Widget。

    国内程序员写博客的博客园:jQuery 2.2.0, XRegExp 1.5.0. 也用了Google的报表服务Google Analytics。程序员写博客,少不了贴代码,需要语法高亮,所以用了SyntaxHighlighter。

    腾讯云社区: 服务器用的Nginx, 前端框架用的React,此外还有Prism。

    国内另一个IT博客网站ITEye:用了Prototype。

    今日头条:服务器用的Nginx,前端框架用的jQuery。也用了Google Analytics。

    阿里云社区:用的jQuery,webpack,服务器用的Tengine,也用了Google Analytics。

    简书:难得地用了Vue,版本2.4.2. 编程语言用的Ruby,也用了Moment.js和jQuery。Web框架还用了Ruby on Rails和Bootstrap。

    Twitter:Google Analytics。

    Google:用的Google自己的服务器Google Web Server。

    要获取更多Jerry的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

    展开全文
  • web开发技术栈(框架)总结

    万次阅读 多人点赞 2020-06-30 11:52:15
    Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql...近两年,小编业余时间从零开始摸索web开发,把web开发常用的技术和框架大概都摸了摸看了...

    原文 web开发技术栈(框架)总结

    Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis……

    天呐,好多……

    小编虽说出身工业软件,但心里一直藏着一个UI梦。近两年,小编业余时间从零开始摸索web开发,把web开发常用的技术和框架大概都摸了摸看了看,趁着五一假期有点时间,做个总结。

    本文提到的前端,是指通俗语义下web开发的前端,主要内容是视图层的开发,包括UI布局、用户交互及后端数据请求展示。

    本文提到的后端,是指web开发的后端,内容包括模块路由和数据库存取。注意,这里的后端不是指大数据开发领域的Hadoop、Storm那些。

    前端

    JavaScript(后文统称为js)、css、HTML是前端开发的语言基础,如果想能将前端框架用好还是需要将水平提高到大概能用的程度。html负责网页的内容和基本结构,css负责UI样式,js负责将用户请求传送到后端并将后端数据在html页面中展示。

    前端的框架分两类,UI样式库和js库。有些UI样式为了实现动态效果,会使用js库如jQuery。

    前端开发的编程工作JS为主,还有近几年出的TypeScript(JS的超集)。

    奇怪的是,最近各官网下载的开发包里都不带jQuery库,如有专业人士路过请稍作指点。

    UI样式库

    前端框架中有很大一部分是UI样式库。这些样式库的关注点是视图。对于纠结(患有强迫症)的开发者,不建议使用UI样式框架,真的是哪哪都看着不爽,到最后还不如自己css造轮子来的爽快。自己css造,不一定好看,但可以满足强迫症。

    Bootstrap

    小编认为Bootstrap是一个非常好的入门选择,教程示例非常丰富,颜值也还过得去。
    栅格布局自带响应式,常用的颜色都有类可以直接调用。
    Bootstrap中文网:http://www.bootcss.com/

    用法示例:

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">导航</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">链接</a>
          </li> 
        </ul>
      </div>  
    </nav>
    

    示例代码可以看出,引入类的方式来定义控件样式,使用方便而且语义清晰。

    Layui

    和Bootstrap差不多的东西,个人感觉色系看起来稍显寡淡。
    Layui官网:https://www.layui.com

    Amaze-UI

    俗称妹子UI,也是一款样式框架。
    妹子官网:http://amazeui.org/

    Font Awesome

    图标字体库和CSS框架,毕竟只有图标字体和CSS,所以一般配合其他的样式框架使用。
    Font Awesome官网:http://fontawesome.dashgame.com/

    js库

    js库是实现功能的主要手段。常规的js库中都会包含DOM(或虚拟DOM)操作、ajax异步get和post请求封装实现、页面渲染刷新等。

    相比原生js,使用库优点在于方便,缺点在于js库文件通常动辄数百kb,在带宽紧张的环境会拖慢页面的加载速度。

    小编现在喜欢用vue.min.js,轻快又方便。为啥不用vue-cli方式呢?讲真,对于php流个人业余全菜开发者来说,npm run dev带来的不方便比方便更多些。

    这年头,不用npm都不好意思说自己是前端框架,不信请看vue、React、AngularJS,全都是这套玩法。

    jQuery

    对于传统开发者来说,js为主的前端框架与其说是框架像是库。对C/C++开发者来说,就像是

    #include <stdio.h>
    ……
    

    jQuery最具特色的操作是 $(“yixzm”) 等价于 document.getElementById(“yixzm”),以及ajax,就像这样:

    $.ajax({ url: "/api", context: document.body, success: function(){
        console.log("test");
    }});
    

    DOM操作真的很方便。

    jQuery官网:http://jquery.com/

    vue

    只需要用一下下,就会很爽的库。
    职业玩家都使用npm的方式,业余玩家嘛用用link引入也就可以了。vue对开发者最大的便利是不用频繁的DOM操作,数据只需要赋值给定义的对象元素即可同步刷新页面内容。

    据jsp玩家讲,和jsp差不多?据php玩家讲,和 <?php 差不多?

    但小编感觉方便程度上还是差很多的,毕竟请求到的数据可以直接进页面,写在js里怎么看都更好些。

    vue-cli模式开发,可以让js代码工程化。或许,这时候的前端工程师需要调整鄙视链层级。(C >> C++ >> java >> php >> js?)

    小编说,js主要负责请求交互和动态刷新,但有人不讲规矩。比如vue中的vue-element,不仅能处理交互,还能生成UI的组件模块。

    vue-cli模式开发,有个叫做模板的东西,文件后缀格式如filename.vue,这玩意将每一个独立的HTML模块连同CSS和JS代码一起封装在一个文件里,用的时候直接引入,相当方便。

    用法示例代码:

    <div id="app">
      <ul>
        <template v-for="key in objs">
          <li>{{ obj.txt }}</li>
          <li v-html="obj.html">--------------</li>
        </template>
      </ul>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        objs: [
          { txt: 'yixzm', html: '<h1>yixzm</h1>' },
          { txt: 'dream', html: '<h2>dream</h2>' },
          { txt: 'stone', html: '<h3>stone</h3>' },
        ]
      }
    })
    </script>
    

    怎么样?够方便吧~

    v-for 这玩意,小编第一次看到时被惊呆了,还能这么写页面?用起来好舒服~

    vue官网:https://cn.vuejs.org/

    React

    这玩意和vue的类似之处是也能工程化的管理js开发项目。既能引入的方式使用,也能npm方式构建项目。

    用法示例代码:

    <div id="example"></div>
    
    <script type="text/babel">
    function UserGreeting(props) {
      return <h1>欢迎回来!</h1>;
    }
    
    function GuestGreeting(props) {
      return <h1>请先注册。</h1>;
    }
    
    function Greeting(props) {
      const isLoggedIn = props.isLoggedIn;
      if (isLoggedIn) {
        return <UserGreeting />;
      }
      return <GuestGreeting />;
    }
    
    ReactDOM.render(
      // Try changing to isLoggedIn={true}:
      <Greeting isLoggedIn={false} />,
      document.getElementById('example')
    );
    </script>
    

    通过示例代码中的这两句:

    document.getElementById('example')
    
    return <h1>请先注册。</h1>;
    

    可以发现,React的开发渲染风格和原生JS相似度很高,和vue区别很大。

    React官网:https://reactjs.org/

    AngularJS

    AngularJS和vue代码相似度很高。

    <div ng-app="">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {{name}}</h1>
    </div>
    

    和vue相比,几乎就是换了各变量名…… 当然,hello world 只是表象,更多区别还需要深入使用才能感受到。

    AngularJS官网:https://angularjs.org/
    AngularJS中文网:http://www.angularjs.net.cn/

    后端

    除了专注视图活跃在用户面前的前端框架,还有一些默默在后台奉献的后端框架。web后端框架做的事一般来说,是提供http请求服务接口,实现请求路由、数据存取、模块后台功能实现等。

    新时代的前端框架如vue和React,本身自带路由功能,大家将其叫做前端路由。前端路由一般使用在开发SPA(单页应用)的场景,路由时会异步加载数据渲染至页面但不会重新加载整个页面。而后端路由会重新向服务端提交请求。

    后端框架一句话总结:存取数据分模块,各种语言都能用。

    Php有ci、tp、Yii和laveral,java有springMVC,Python有Django,JS有node,可谓百家争鸣、百花齐放。

    这时候,C/C++出身的小编秉着不靠天不靠地轮子自己造的精神,对各框架普遍采取读源码试用而不用的态度。了解、学习,但写写东西还是喜欢自己撸。强撸和借鉴(抄袭)有益理解别人的闪光点。

    php框架

    ci和tp上手极快,Yii和Laravel稍微有点学习成本。

    ci

    ci即优雅的CodeIgniter,很mini的一款框架,相对容易入门。

    CI中文网:https://codeigniter.org.cn/

    thinkphp

    传说中的培训班神器,据说上手极快?

    官网:http://www.thinkphp.cn/

    Yii

    没啥好说的,看起来和ci、tp貌似差不多…… 好久没翻Yii源码,记得貌似是传统的<?php code ?>的方式写模板?没啥特别的映象。

    Yii中文网:https://www.yiichina.com/

    Laravel

    本菜感觉上手好麻烦,夹杂的东西太多。(正在使用laravel的大神请尝试理解小编着重提到的“菜”字)
    Composer安装模块效率很高,据说是冲锋枪?学习成本还是蛮高的。

    Laravel中文网:https://www.golaravel.com/

    Python框架

    Django

    Python版的Laravel……

    Django小编写自动化、爬虫的时候也会用到,但拿来写web总感觉不习惯…… 谁让Php是世界上最好的语言呢~

    Django官网:https://www.djangoproject.com/

    Java框架

    Spring MVC,额,没写过Java,小编如果说这是Java的web开发框架,不知是否有专家会留言批评呢?

    HTTP服务

    以上后端框架关注应用和数据,对HTTP服务监听关注的并不多。服务监听工作一般由Apache或者Nginx来承担,负责请求响应、并发和数据返回。关于HTTP服务,小编除了Apache用的比较多,Nginx搭过几个系统外,了解的并不多。所以,小编暂且总结接触过的这三个。

    对于apache和nginx的比较,网上有很多帖子有讲而且很详细。比如这篇:Apache和Nginx的区别 就讲的很好

    后端流的JS

    node-js,额,只用node写过一个socket server,没啥可总结的。node写在这里是否合适也有待学习。
    nodejs中文网:http://nodejs.cn/

    apache

    老牌的HTTP服务提供者。在小编写C++的时代,传说中的LAMP、WAMP犹如迷雾中的灯塔一般,在知识的海洋里引领着小编。

    apache动态请求响应效率高,httpd.conf配置也极其方便。

    apache官网:http://www.apache.org/

    nginx

    据说更擅长静态文件响应?需要配置反向代理才能正常使用Php、Python等语言开发的工程,小编个人感觉有些麻烦,不怎么喜欢用。

    nginx官网:http://nginx.org/

    数据库

    存数据,mysql很方便。redis在内存里,数据请求时加载超级快!

    mysql VS redis?

    关系型和非关系型,索引方便和响应快速……
    一起用吧,就像硬盘和内存。

    不过,现在mysql一般用MariaDB来替代。
    mariadb官网:https://mariadb.org/
    mysql官网:https://www.mysql.com/
    redis中文网:http://www.redis.cn/

    开发环境及工具

    vscode

    这玩意写前端代码还不错,良心工具。

    vscode官网:https://code.visualstudio.com/

    ……

    还有很多,小编这次先总结这些。

    #写在最后

    web开发内容很多,也很有趣。

    小编将求索以图成长。

    展开全文
  • 接单网站本地运行,技术栈 vue vue-router vuex
  • 互联网建立60多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案。 我从2000年初开始做网站开发,使用的技术不断...

    http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html

    前言

    互联网建立60多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案。

    我从2000年初开始做网站开发,使用的技术不断迭代,一些消失了,更多的出现了。

    最近写过  .NET技术大系概览 (迄今为止最全的.NET技术栈) ,相信很多网友感叹掌握的.NET技术远没有这个技术栈里面所描述的多。

    问题

    大家是否想过:

    • Web前端开发究竟包含哪些技术呢?
    • 我所掌握的技术这个子集,在Web前端技术大系这个超集里面占的比例是多少呢?
    • 我究竟还没有掌握多少Web前端技术呢?
    • 面试的时候会考哪些技术呢?

    相信很多网友看过我之前写的.NET技术大系概览 (迄今为止最全的.NET技术栈),一个简单易懂的栈图可以概括.NET这个庞大的技术生态圈里面基础技术:

     

    那么,Web前端开发是否也应该有这样的技术栈概览图呢?

    搜索了很久,没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。

    互联网上来去都是那几个简单的,譬如这个:

     

     

    或者这个:

     

     或者这个:

     

     

    不过这些都远远没有高度概括整个Web前端开发技术,和我需要的不一样。

     

     

    Web前端开发技术栈

    现在流行一个说法,是Full Stack (全栈),简单地说是万金油,说得体面一点就是前端、后台、存储、架构等都懂,我觉得我不是全栈,而是爆栈(stack overflow),开玩笑了。。。。

     

    这个Web前端开发技术栈,大约20个层级,大约100个技术点,从底层一直到最顶层:

    • 浏览器
    • 渲染引擎、JavaScript引擎
    • HTML/JavaScript/CSS三支柱
    • 编辑器
    • 编译任务
    • 编译工具
    • 打包、调试、质量
    • 测试
    • JS基础类库
    • JS类库
    • UI框架
    • CSS预处理器
    • 模板
    • 现代化
    • 安全/模式
    • 中间语言
    • 跨平台解决方案

    这个图表里的分类未必准确,相关技术也难免会有遗漏,欢迎大家指点以便不断改进。

     

    Web前端技术实在太繁多限于篇幅,,这里没有罗列一些技术。

     

    以下是预览图:

     

     

    因为内容太多,要看完整技术栈图的,可以访问GitHub。

     

    GitHub开源

    在GitHub开源了:WebFrontEndStack


    展开全文
  • 列举JavaWeb开发都需要学习的技术栈

    千次阅读 2016-12-09 22:00:47
    列举JavaWeb开发都需要学习的技术栈: 1.Mybatis 2.Maven 3.Hibernate 4.Spring 5.SpringMVC 6.SpringBoot 7.Redis 8.Shiro 9.Struts 10.JDBC 11.JPA 12.local cache 13.jedis 14.Mysql 15.Servlet 16.memcache 17....
  • 目前最火的Java主流技术栈开发工具

    千次阅读 热门讨论 2021-03-22 18:50:26
    目前最主流的Java技术栈开发工具的总结,对于自己的算是温故知新!顺带谈谈自己对于学习技术的看法和心得
  • Wappalyzer可以帮你轻松探测到别家网站采用的技术栈,做信息采集的时候十分有用
  • 最近在公司任务比较小,闲来无事就研究了一下 ASP.NET MVC+vue+axios与ASP.NET WebAPI+vue+axios实现网站开发,因为公司一直在使用ASP.NET MVC做电子政务开发,很是麻烦;自己想着有机会重构电子政务系统(想想就行~...
  • 大数据技术栈

    万次阅读 2018-09-02 17:36:28
    大数据技术栈全貌 下面自底向上介绍各个层的主要项目。 1 采集层和传输层 Sqoop 在hadoop和关系型数据库之间转换数据。 Flume Flume是一个分布式的高可用的数据收集、聚集和移动的工具。通常用于从...
  • 技术栈

    千次阅读 2017-05-03 10:44:15
    技术栈一、服务 java c/c++ go python ruby node.js Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和...
  • 在平时的开发工作中我们需要使用到很多的工具来辅助我们的开发,也经常会查阅很多的网站来收集资料。下面具体总结一下开发过程中的一些工具类和网站的积累分享给大家。 辅助工具 Xmind 脑图制作工具 ProcessOn...
  • java后端技术栈

    千次阅读 2019-03-11 13:28:59
    文章目录Java基础数据结构算法设计模式单例模式工厂模式数据库框架...java后端技术栈 Java基础 数据结构 算法 设计模式 单例模式 工厂模式 数据库 框架 Spring IOC AOP Spring MVC Mybatis 分布式系统 大数据...
  • 技术栈是什么

    千次阅读 2021-03-23 21:28:44
    技术栈是什么鬼? 栈的英文是stack 首先,我们使用金山词霸来查一下stack的中文解释 stack有堆起来的意思,其实就是堆叠,顾名思义,技术栈就是你掌握了一堆的技术(掌握多种技术) 一般来说是指将N种技术互相...
  • 目前, 在中大型项目开发领域, 仍然是采用 JavaEE 技术栈, 主要应用版本是 JavaEE 5/6, 搭配 JavaSE 6 / 7 + Tomcat 6 / 7 进行 Web 项目开发; 所以, 在日常的学习 / 编码中, 应当重点注意对应版本中的相关规范, ...
  • 大型网站架构演变史(含技术栈与价值观)

    千次阅读 多人点赞 2016-09-03 21:25:04
    这篇文章是参考李智慧的《大型网站技术架构:核心原理与案例分析》和现蘑菇街CTO曽宪杰的《大型网站系统与Java中间件实践》写的一篇读书笔记。前言何谓大型网站?大型网站的特点是什么?大型网站架构发生演变的源...
  • JAVA高级研发技术栈

    千次阅读 2018-05-11 14:48:01
    一、基础篇JVMJVM内存结构堆、、方法区、直接内存、堆和区别Java内存模型内存可见性、重排序、顺序一致性、volatile、锁、final垃圾回收内存分配策略、垃圾收集器(G1)、GC算法、GC参数、对象存活的判定 JVM...
  • Web前端技术栈

    千次阅读 2015-10-16 10:18:04
    Web前端开发究竟包含哪些技术呢? 我所掌握的技术这个子集,在Web前端技术大系这个超集里面占的比例是多少呢? 我究竟还没有掌握多少Web前端技术呢? 面试的时候会考哪些技术呢?
  • PasteMe 技术栈梳理

    千次阅读 2019-08-17 03:18:09
    开发 PasteMe 也有一年多了,从刚开始的只有我一个人用到现在的日活上万,即便是一个十分简单的系统,一个人做产品 & 全栈 & 运维 & 客服很不容易,感慨万千,准备在此之后梳理一下用到的一些所谓的技术,以及踩过的...
  • 大数据技术栈详解

    千次阅读 2020-04-12 19:11:16
    相信很多学Java的同学都有想转大数据或者学大数据的想法,但是一看到网上那些大数据的技术栈,就一脸懵逼,什么Hadoop、HDFS、MapReduce、Hive、Kafka、Zookeeper、HBase、Sqoop、Flume、Spark、Storm、Flink等等...
  • 2019年9月技术栈情况汇总

    千次阅读 2019-09-23 11:32:18
    2019年9月技术栈情况汇总基础概况具体应用技能 一.掌握javaEE开发常用类库,组件,框架,中间件等使用. 二.了解主流web前端开发技术 三.掌握常用工具软件 参与项目情况: 一.互联网租房平台项目 项目采用SOA架构思想...
  • 大数据 技术栈

    千次阅读 2017-12-07 10:05:11
    今天看到一篇有关云计算技术文章,把虚拟化和虚机集群管理OpenStack、容器Docker和容器集群管理Kubernetes、通用资源调度管理器Mesos和大数据处理调度管理器YARN、容器隔离微服务和SOA大集成都讲透了。我也手痒想把...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,252
精华内容 20,100
关键字:

网站开发技术栈