前台是个最近几年很火的职业，而且持续火热中，有个词叫水涨船高，来的人多了，竞争多了，标准也就提高了。现在对前台工程师的要求跟当年前已经不能同日而语了。

大前台，包括 Android、iOS、web 前台、小程序开发等。

当然了，所谓的趋势，不是一天两天就到来的，它是未来的一个技术方向，我们之所以关注趋势，是要关注变化，技术的发展与普及不是一日之功，肯定是慢慢过渡的，但是你能够比其余人提前看到方向，真正的市场到来的时候，你即可以提前做好准备，提前发掘机会。

首先，我们从基础来看，在对2019前台开发如何进阶，提升自己，再做更深一层讲解。

1 基础技术

前台的三大基础毫无疑问就是HTML、CSS和JS。我称之为前台的骨、肉和魂。

先说“骨”——HTML。HTML,翻译过来就是超文本标记语言，而不是江湖上的HOW TO ML。方向不能搞错了，我们整的东西可是老少咸宜的。HTML学习最重要的标签的学习，div、h1-h6、p、ul-li、strong、图片、字体等，什么内容用什么框.

再说“肉”——CSS。CSS定义了HTML标签的显示外观，气质。主要掌握浮动，宽高设置、显示属性

最后“魂”——Javascript。这是运行在浏览器上的脚本，但是现在javascript已经远远不是当年的那个js了，尤其Ecmascript6标准出来后，nodeJS 横空出世，JS暴露出一统天下的野心，JS让网页变得灵活，其实现的每一个明里暗里的交互，其实是为了触及您的灵魂，这也是其成为魂的起因。

而现在，CSS3和HTML5的发展，又将web推向下一个时代，一个更为丰富多彩的时代。

2 环境基础

设施、浏览器以及工作原理

必需指出的是，html CSS JS都是运行在浏览器的，是由浏览器负责编译和呈现的。所以必需理解浏览器的工作原理。但是浏览器千千万万，也不是每个都要去解剖，主要的有Chrome, Firefox, IE，Safari,Opera,国内的主浏浏览器基本是基于chrome内核开发，做了少量更为接地气的功能，理解下即可以了，主要有QQ浏览器，UC，百度浏览器，360浏览器，搜狗浏览器，猎豹浏览器等。

3 计算机基础

计算机网络，http协议。既然是web必不可少需要知道计算机网络的知识，这对于网页的加载和速度优化有很大的帮助，并且，我们做的不是静态的页面，而是动态的，所以必然涉及到与后端之间的数据的传输和存储，这个是要掌握的。

必需懂：Ajax，必需会的工具：fiddler

4 流行框架

流行的前台UI框架：

Bootstrap、jQuery UI、Amaze UI

流行的前台框架：

Node.Js

jquery mobile

angular.Js

Vue.js

React.js

5 可视化组件

Echarts

tableau(收费)

6 新应用

针对移动化以及物联网方向发展

7 锦上添花—

UI、 UX 、交互设计、 SEO（包括SEM） 、产品，更主要一个同理心。好的设计和交互才能带来的好的体验，博得客户。

SEO则在推广层面，好的SEO让我们以最低的成本，借力搜索引擎，取得更加跟多的曝光机会，毕竟这是个酒香也怕巷子深的时代。

最后是产品，站在产品角度，融合（前后台）技术和商业，让产品产生价值，实现价值。

作为一个新兴的技术领域范围，大前台在不同的语义环境下，有着不同的解释和含义，我们以几个视角去对大前台并做逐一的分析。

Node.js 与前后台分离

在绝大多数的前台开发者口中，大前台有时与 Node.js 一起讲，有时与前后台分离一同讲，事实上，大前台概念也正是由广大前台开发者提出的。

过去几年，前台技术经历了爆发式的发展，这种发展最重要的推动者之一就是 Node.js。Node.js 为前台建立了与系统之间沟通的桥梁，从此前台技术不仅能在服务端大放异彩，并且在本地的前台开发工具与工作流上大展身手，前台从此被解放，JavaScript 统治世界的论调一度甚嚣尘上。

不过，当人们冷静之后，发现 Node.js 在服务端并没有太多的优势，再加上 Node.js 本身技术发展的少量波折，导致它在服务端的应用并不理想。但虽然如此，广大的前台开发者还是获得了少量阶段性胜利，其结果就是前后台分离。

在传统 Web 开发时代，前台页面模板是由后台生成的，导致在页面需要频繁修改的时候，效率极低。前后台分离指的是后台只提供接口，前台对页面有完整控制，同时通过中间层将前后台隔开，在这里对数据进行抽取、聚合、分发等操作。这个中间层，通常也是由前台开发工程师负责。

从这种意义上讲，大前台的原始定义可以称为前台技术的扩大化，包括 Node.js，同时对 Web 页面有更强的控制权，开发也将承载更多功能的页面。

此处划重点：基于 Node.js 的前后段分离是大前台的重要技术。

从 Facebook 的 Reactive Native，再到 Google 的 Flutter，足以看出，起码对这些科技巨头们来说，他们是认定这个方向，并且在投入的，只是当下技术还不够成熟，所以这类前台跨平台开发框架都还不够普及，但是你们得相信，这些巨头的判断与实力。

再说到国内各种平台的小程序，微信小程序、支付宝小程序等等，其实都是属于真正意义的大前台，所以前台开发人员，以后的要求会越来越全面，你别觉得不信，等着未来的发展就知道了，以后很可能一个前台开发必需是全栈前台。

所以，每一个大前台开发，最好都懂点前台开发知识，而基本的 web 前台开发基础就显得很重要了。

我常遇到少量工作多年的前台工程师，在看到少量我认为很基础的用法时，发出惊呼：「怎样还可以这样」。

由于很多同学学前台的方式是「土法学前台」，他们对于知识的了解基本都停留在点上，素来没有对前台的知识体系和底层原理形成真正地了解。

加上前台标准的快速升级，前台工程师的学习压力变得越来越大了。就拿 JavaScript 标准来说，ES6 中引入的新特性超过了过去十年的总和，新特性带来的实践就更多了，仅仅是一个 Proxy 特性的引入，就支持了 VueJS 从 2.0 到 3.0 的内核原理完全更新。

许多前台程序员都有感触：学习速度跟不上技术发展速度，而手忙脚乱、力不从心。

这个现象，在少量小公司的前台工程师身上尤为显著，少量有技术追求的工程师，技术敏感度和主观能动性都不错，工作了五六年之后，逐渐走上技术管理的岗位。但因他们所在公司的业务并不复杂，缺少框架知识积累，个人技术仍处于比较初级的阶段。做了管理，技术没跟上，还错过了最佳的学习时间，境遇可想而知。

工作压力大，技术更迭快，让很多前台开发者高呼「学不动了」。其实不是你学不动了，而是你的知识体系底层构建出现了问题。

目前在国内，不少一线互联网公司比方美团点评、饿了么、网易杭研都有叫大前台的团队或者者在对外时使用该称谓，不过，因为之前大前台并没有明确的定义，这些团队的人员构成并不相同，它们都是各个公司在自己对大前台的了解，以及对公司业务的支持需求下设立的。具体情况如下（可能有偏差）：

美团点评大前台团队：包括 FE、iOS、Android 开发，以及少量工程化工作。

饿了么大前台团队：以 FE 为主，包括 Node.js，以及 Weex 等。

网易杭研大前台团队：包含 Web 前台、PC 用户端和手机端

从这些一线互联网公司团队组建方式的演进，我们不难发现，大前台已经是未来发展的潮流。

大前台技术开发者的晋级之路怎样走？

作为一位在大前台时代的前台技术开发者，我们应该做怎么的准备来及时跟上技术发展的浪潮？综上所述，我们不难得出以下结论：

基于 Node.js 的前后段分离设计模式是大前台架构演变的必由之路

基于 React Native 的新一代移动 App 开发技术凭借其优势已然有超越原生的趋势

新型大前台团队的组建已成现代互联网公司技术团队的标配

假如你是一位工作1年左右的前台开发者，你需要提升自己，给你少量建议：

1.深入了解前后台分离理论与实践：

传统web研发模式

什么是前后台分离

前后台分离的几种形式

前后台分离的部署架构

前台后台分离开发模式

分离式架构数据接口规范

基于Node.js的前后台分离

2.Node.js技术进阶与实战

从0到1了解Node.js HTTP板块的本质

如何一步步从HTTP板块开发成Koa框架

Koa Web框架的中间件系统

常见的适合Node.js开发场景和其所扮演的角色

利用Node.js开发APL接口

SSR服务器端渲染技术

如何选择适合业务的开发模式

利用Node.js做性能分析

Node.js常见的开发部署架构

利用Node.js实现产品监控

3.深度掌握 React Native 技术

React Native 的基本架构及原理

关于热升级的概念及实践

如何集成到现有原生应用

编码规范标准化（项目结构、ESLint、Flow/TypeScript）

Redux 架构的原理及应用

跨平台开发常见的思维圈套与技巧

React/React Native 新特性与展望

多年编程经验，今年1月整理了一批2019年最新WEB前台教学视频，不管是零基础想要学习前台还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前台的同学，学习规划、学习路线、学习资料、问题解答。只需加入WEB前台学习交流qun：296，212，562，就可免费获取，学习不怕从零开始，就怕从不开始。