最新最全的2019前端发展趋势及如何学习

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

大前端，包括 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 新特性与展望

如果你是一个小白，想从0开始学习前端，你可以根据以下学习路线来学习web前端开发，最后祝所有程序员都能够走上人生巅峰，让代码将梦想照进现实