试谈web前端

导语：

对大前端工程师来说，这是最好的时代。文中多处引用牛人博客观点，重在分享，见谅见谅~

一，认识前端

WEB编程语言，分为WEB静态语言和WEB动态语言，WEB静态语言就是通常所见到的超文本标记语言 ，WEB动态语言主要是ASP，PHP，JAVASCRIPT，JAVA，CGI等计算机脚本语言编写出来的执行灵活的互联网网页程序。
Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过10年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

最早的软件都是运行在大型机上的，软件使用者通过“哑终端”登陆到大型机上去运行软件。后来随着PC机的兴起，软件开始主要运行在桌面上，而数据库这样的软件运行在服务器端，这种Client/Server模式简称CS架构。

随着互联网的兴起，人们发现，CS架构不适合Web，最大的原因是Web应用程序的修改和升级非常迅速，而CS架构需要每个客户端逐个升级桌面App，因此，Browser/Server模式开始流行，简称BS架构。

在BS架构下，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web页面，并把Web页面展示给用户即可。

当然，Web页面也具有极强的交互性。由于Web页面是用HTML编写的，而HTML具备超强的表现力，并且，服务器端升级后，客户端无需任何部署就可以使用到新的版本，因此，BS架构迅速流行起来。

Web应用开发可以说是目前软件开发中最重要的部分。Web开发也经历了好几个阶段：

静态Web页面：

由文本编辑器直接编辑并生成静态的HTML页面，如果要修改Web页面的内容，就需要再次编辑HTML源文件，早期的互联网Web页面就是静态的；

CGI：

由于静态Web页面无法与用户交互，比如用户填写了一个注册表单，静态Web页面就无法处理。要处理用户发送的动态数据，出现了Common Gateway Interface，简称CGI，用C/C++编写。公共网关接口编辑
公共网关接口(Common Gateway Interface)为web服务器定义了一种与外部应用程序交互、共享信息的标准。
CGI的工作原理
客户端浏览器向WEB服务器提出服务请求并显示服务器传递过来的结果。WEB服务器将客户请求正确映射传递给CGI接口程序，在将CGI的执行结果传递给客户端的浏览器。CGI接口负责处理WEB服务器传递过来的客户服务请求。

CGI的作用

• 扩大了WEB服务器的功能;
• 它打破了服务器软件的局限性，允许用户根据需要采用各种语言去实现无法用HTTP、HTML实现的功能，给WWW提供了更为广阔的应用空间;
• 为在不同的平台之间进行沟通提供了范例。

连接服务器与外部应用程序。服务器可以向CGI程序发送信息，CGI程序也可以向服务器程序回送信息。

ASP/JSP/PHP：

由于Web应用特点是修改频繁，用C/C++这样的低级语言非常不适合Web开发，而脚本语言由于开发效率高，与HTML结合紧密，因此，迅速取代了CGI模式。ASP是微软推出的用VBScript脚本编程的Web开发技术，而JSP用Java来编写脚本，PHP本身则是开源的脚本语言。

MVC：

为了解决直接用脚本语言嵌入HTML导致的可维护性差的问题，Web应用也引入了Model-View-Controller的模式，来简化Web开发。ASP发展为ASP.Net，JSP和PHP也有一大堆MVC框架。

目前，Web开发技术仍在快速发展中，异步开发、新的MVVM前端技术层出不穷。

Python：

Python的诞生历史比Web还要早，由于Python是一种解释型的脚本语言，开发效率高，所以非常适合用来做Web开发。
Python有上百种Web开发框架，有很多成熟的模板技术，选择Python开发Web应用，不但开发效率高，而且运行速度快。

二，学习前段

基础学习：

• HTML
• CSS
• JavaScript
• jQuery
• 学习如何编写可阅读的代码
• 深入学习JavaScript：当每周我们有一个比任何旧框架更好的新框架的时候，这时会非常容易花费你的大部分时间去学习框架而不是语言本身。假如当你正在使用一个框架，但是并不理解它的工作原理，那就停下来并开始学习语言直到理解如何使用工具去工作。
• 学习函数式编程：多年以来，我们想要在JavaScript中使用类，现在我们终于有了类但是再也不想使用它了：函数就是我们想要的一切！我们甚至用函数编写HTML（JSX）
• 学习设计基础
• 学习如何与人合作
• 学习如何为人写作

进阶学习：

Web 框架上，从 Google 查询关键字的大势看，jQuery 时代已慢慢离我们而去。Web 前端框架已基本三足鼎立，分别是 React / AngularJS / Vue。不管是 Web，还是客户端，都不同程度遇到业务越来越复杂，代码量越来越大，编译性能越来越慢的问题。Web 开发中，Node.js已在驱动前后端的再分工，这已是事实。跨端技术今年已不再去谈论 Hybrid 技术了。离线化、差量更新、Web 与端互调等能力已不是什么新鲜事，说明混合开发已基本成熟，在各大厂均有较为广泛的使用，如果还没做的，也在补齐当中。新的技术是：React Native、Weex，还有 PWA、小程序，甚至还有 Electron。

三，前景

• iOS 动态插件化技术。特别是 iOS 上的插件化技术期待能够得到更大的发展，来解决目前发版效率与包大小问题。
• Google 一边是 Chrome 的 Web，另一边是 Android 的 App，我很期待的是 Chrome 与 Android 融合之后对开发的影响。
• Web 框架层面明年难有创新，中期还仍是 React/AngularJS/Vue 三驾马车的技术栈体系，但我仍期待是否有超越 React 的模板/框架思路。
• HTTP 到 HTTPS 的更替将会推动 HTTP 2 的使用。让 Web 页面性能十年以来以请求数为首要基准成为过去式。为应对 HTTPS，部分云计算厂商可以提供整套移动端商业解决方案，如：长链透传收费服务和 HTTPS 套装。
• 跨端上 React Native 与 Weex 着重于解决跨端技术问题，并不能给开发者带来实实在在的收益。PWA 还谈之过早，所以我更看好小程序未来的发展，并不是技术上现在有多牛，而是在微信它是能给个人开发者和 Web 从业者带来就业机会与收益的最佳方式。脑洞大一点的看，支付宝、Facebook、小米是否也会会推出自己的「小程序」场景呢？是件令人期待的事。

最后，H5

一、移动优先；

二、游戏开发是重要领域；

三、响应式设计：

在HTML 5真的改变移动开发平台之前，必须要迈出重要一步，那就是“响应式设计”，也就是屏幕可以根据内容而自动调整大小。然而响应式设计也是一件非常不容易的事情，因为当今各式各样的设备实在是让开发者眼花缭乱，手足无措。要想做好响应式设计，就必须洞悉内容与屏幕之间的反馈关系，响应式设计要完全离开“流”，转而注重内容是如何在网页和移动设备中被处理的，这一过程还在继续，HTML 5会让它最终成为可能。

四、设备访问;

五、离线缓存。