catalog

* One . Upgrade guide for front end attack
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E4%B8%80.-%E5%89%8D%E7%AB%AF%E6%89%93%E6%80%AA%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97>
* 1.1 Which framework should I start from ?
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E6%88%91%E5%BA%94%E8%AF%A5%E4%BB%8E%E5%93%AA%E4%B8%AA%E6%A1%86%E6%9E%B6%E5%BC%80%E5%A7%8B%E5%AD%A6>
* 1.2 A transfer
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E4%B8%80%E6%AC%A1%E8%BD%AC%E8%81%8C>
* 1.3 Second transfer
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E4%BA%8C%E6%AC%A1%E8%BD%AC%E8%81%8C>
* 1.4 Transfer - other
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E8%BD%AC%E8%81%8C-%E5%85%B6%E4%BB%96>
* Two . Why should you study React
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E4%BA%8C.-%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%A0%E5%BA%94%E8%AF%A5%E5%AD%A6%E4%B9%A0react>
* 2.1 Extension of technology stack
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E6%8A%80%E6%9C%AF%E6%A0%88%E7%9A%84%E5%BB%B6%E4%BC%B8>
* 2.2 Component development
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91>
* 2.3 The promotion of thought
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E6%80%9D%E6%83%B3%E7%9A%84%E6%8F%90%E5%8D%87>
* Three . There are no actual combat projects , How should I learn React
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E4%B8%89.-%E6%B2%A1%E6%9C%89%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE%E6%88%91%E5%BA%94%E8%AF%A5%E5%A6%82%E4%BD%95%E5%AD%A6%E4%B9%A0react>
* Four . Information recommendation
<https://www.cnblogs.com/dashnowords/p/9632496.html#%E5%9B%9B.-%E8%B5%84%E6%96%99%E6%8E%A8%E8%8D%90>
First link :https://bbs.huaweicloud.com/blogs/70f69ca4953111e89fc57ca23e93a89f
<https://bbs.huaweicloud.com/blogs/70f69ca4953111e89fc57ca23e93a89f>

《 The front end of unifying the world 》 Series is your own front-end learning notes , To introduce javascript In the field of non web development application cases and find all kinds of fun js library , Irregular update . If you understand the front end or write page binding events , So you're really a little bit OUT 了 , There's so much the front end can do ,
mobile phone app development , Desktop application development , Library for neural network artificial intelligence , Page games , Data visualization , even to the extent that Embedded development , Whatever the fire is , A little skilful at rubbing hot spots
. If you think the daily development of the front end is a bit boring , Let's take a look at the front end . If this series works for you , Please like me , Support me to continue writing .




One . Upgrade guide for front end attack


A lot of front-end developers , All of them begin with the development of business logic using framework . When it comes to framing ,Vue,React,Angular
The three frameworks have delineated their own user groups , In terms of the number of fans ,Vue most , And then there is React, Finally Angular
, In fact, this situation is not completely related to the advantages and disadvantages of the three frameworks themselves . If you've used it Angular.js1.X edition , You will understand that the above three frameworks can be collectively referred to as the second generation front end SPA frame
, From a historical point of view , They all solved it in their own way Angular.js1.X stay SPA Some problems in the implementation of the model ; From the perspective of the future , They are all in the process of being standardized Web
Component standard . If you only use it skillfully API Business logic development
As a measure , So there is no substantial difference between understanding one framework and understanding the above three frameworks , Unless the interviewer is a parallel , Otherwise, it's impossible to give you a little more salary .


If your project team is already using a framework , So for a new person , You just need to write the business logic tasks assigned to you , Read the code of the old birds in the group , Learn the team's component development paradigm and take notes , Familiar with the ecology of the framework , Be familiar with the API wait , Accumulate experience and upgrade level , Complete the initial
Novice -> Front end developer transfer .

1.1 Which framework should I start from ?

Many novices have this question , The author's suggestion is that Vue->React->Angular.

Vue
It's the most popular , The grammar is concise , High community activity , The number of people who use it is also the largest . And there are almost complete solutions to more complex problems , You'll soon be able to get started with business logic , And make continuous progress in the work , If you're not a skilled front-end developer , You should give priority to learning it .

React It's the second framework you should learn , Its development model is actually Vue Very similar , But in the Vue You can also use ES5 To develop the syntax , And No ES6 Basic knowledge of , You might even
React Project's demo It's difficult to read (React from 16.0 Version has removed the ES5 method createClass It is recommended to use ES6
To implement the ), At the same time, browsers can't run those strange code directly , You have to learn a whole set of things like ES6,Babel,Nodejs,Webpack
And so on, which I often hear but don't study . study React The purpose of , It's not about letting you use another set API Refactoring your own project , Instead, I forced myself to expand the technology stack to the whole front end
, And began to focus on knowledge beyond page development , The process of learning may be long and even painful , But in the end, you'll find that your investment is worth it .

Angular Technology stack and ecology can be selected as the contents , If you like it Java That kind of rigorous programming , You might like this combination of front and back technology stacks , in fact Angular
It's also the choice of many back-end students when they flip the front-end ( That is, the back-end full stack engineer ). But it can be hard for developers to understand from the front end Java
Abstractions at all levels in , Not to mention design patterns and surrounding ecology . Compared with the first two ,Angular More like an old academic , Wordy but rigorous , It requires you to use it immediately Javascript
This toy language at the same time , Still need to use complete software engineering thinking and process to write code . But whether or not to further study , I suggest that you can browse relevant technology stacks and various blogs .

When you can use it skillfully Vue or React Technology stack and surrounding ecological time , You can already be called a front-end developer
了, And those who even basic business logic are not clear about the front-end rookies have a clear distance . This is a time when you need to make a choice about your future , The sun also needs a lens to focus in order to ignite the paper , You should also focus on the direction you want to do more .

1.2 A transfer

please remember , When you have the ability to make the following choices , You are already competent for most of the work of front-end developers .

♕ Career introduction —— Front end Engineer

Skills book of front end Engineer , Is based on node.js Starting to expand . At this stage of learning , You need to master two big skill modules —— Extended writing and front end Engineering , Which means you need to
Change from user oriented to developer oriented and whole front end engineering as much as possible . Extending the ability to write allows you to encapsulate common modules for other developers on your team , Front end Engineering
It allows the rest of the team to focus on the front-end business logic itself .

*
Extended writing

It refers to the basic component abstraction ability , You need to be able to write extensions or common components for various frameworks and tools , For example, write jQuery plug-in unit ,Angularjs Custom instruction ,React assembly ,
webpack or gulp Function extension components , Even use C++ by node.js Write native extensions, etc , You can even try adding custom extensions to your own packaged components
Support function of , It can help you better use your chosen technology stack , Complete from “ Process oriented programming ” reach “ object-oriented programming ” The change of basic thinking mode , So you don't have to write over and over again .

*
Front end Engineering


It refers to development other than code writing , deploy , test , Implementation of front-end workflow in a series of links such as online and monitoring . For developers , The code is written and the test is finished , And for front-end engineers , Code writing is just a link in the whole workflow , You know, it's not your code that doesn't report errors , That means it can be presented to users correctly . The front-end automation engineering provides a complete set of code processing process , Let such as add Prefix suffix ,CSShack, grammatical transformation , Picture merge , Code obfuscation , Code segmentation and so on, a series of functions become automatic .

♕ Career introduction —— Junior Graphics Engineer

If you're not interested in taking control of the whole project , Maybe you can think about the direction of graphics , Skills book of junior Graphics Engineer , Is based on UI To expand . graphics
In fact, it is a very broad concept , The author's personal understanding of graphics is generally including data visualization , senior UI Design and development ,GIS, game
These common subdivision directions . Compared with architecture direction , Graphics is more vivid and interesting , It's also easier to give developers a sense of accomplishment . What do you think of making a game out of a bunch of raw materials and ideas and a lot of frameworks and dependencies
Hello world Which one is more interesting ? Most people will choose the former . But in fact, most of the primary front-end developers don't have many opportunities to get involved in this direction , Because of graphics
It is often necessary to process large data sets , That means it and performance
These two words are directly linked , Most of the primary front end does not have the ability to solve problems in this direction . Want to make a difference in this career direction , The learning needs to be completed in the initial stage include :

*
Basic realization of data visualization

Be able to use it skillfully Echarts perhaps D3 Realize the basic data visualization .

*
CSS3D,SVG,Canvas Related development capability of

You need to relearn CSS3D,SVG,Canvas
These technologies that may not be used in normal projects . Because of the challenges you face , No more adjustment div Element layout or modify the size of the box model , It is the development of all kinds of vector graphics and even the pixel level of large amount of data .

*
UI Design and dynamic design

You need to add a lot of design knowledge and skills to improve your aesthetic and output quality .

1.3 Second transfer

please remember , When you have the ability to make the following choices , You have been able to do most of the job for a career change .

♕ Advanced career introduction —— Front end architect

A front-end architect , We need to start studying the source code of various frameworks , Study the data structure , Design patterns , Core algorithm
, And try to optimize the overall performance of the code from all aspects , And provide solutions from language level to architecture level for various technical problems .

♕ Advanced career introduction —— Senior Graphics Engineer


The development work of senior graphics engineer needs to complement the design , Transform a table into a bar chart , That's not graphics . Senior Graphics Engineer , Can give the design work which is not inferior to the designer , Can make elegant and interactive front-end page , You can also continuously optimize code performance to speed up rendering .

♕ Advanced career introduction —— Game Engineer

After acquiring the skills of a junior Graphics Engineer , Plus high school physics and high school mathematics , Can be competent for the development of front-end games , Using the H5 Game framework development page Tour , Or continue to expand your technology stack to
cocos2d or unity This more professional framework engine , They even forced themselves to develop high-performance engines , It all depends on your own efforts and will .

1.4 Transfer - other

of course , In the process of front-end progress , You could end up as a back-end engineer , project manager , System Engineer , Algorithmic Engineer and so on , Or into artificial intelligence , Big data analysis , virtual reality ,
Augmented reality and other very popular direction to continue their own exploration and growth , But please always remember , Language itself is not an obstacle to your entry into a field , program = data structure + algorithm , It is not subject to language categories , Not only
python In order to develop artificial intelligence , It's not just about it C++ To develop games , Limit your own , Only one's own will .

Two . Why should you study React

The furthest distance in the world is not from heaven to hell , But there is only one line of demand "Hello World", I did it for weeks .

2.1 Extension of technology stack

React It's not just a framework , It is also a new front-end workflow .

You need to learn ES6 Or updated javascript standard , To understand React A bunch of strange looking grammars ;

You need to learn to use it Babel, So you can write it yourself jsx Code and ES6 Syntax code is eventually translated into code that the browser can recognize ;

You need to relearn javascript Object oriented programming to understand the basic implementation principle of components ;

You need to deepen your understanding of javascript Understanding of basic knowledge , To better understand the beauty of advanced usage such as high-level components ;

You need to learn Redux Data management architecture , To understand the idea and implementation of one-way data flow and data management ;

You need to learn Webpack, To manage the entire front end engineering build and resources ;

......

A month later , You can finally understand React How to output a sentence step by step on a blank page "Hello World"了.

2.2 Component development

Component development is a trend of modern front-end development , You need to experience it in development React The meaning of components in , If the component design is reasonable , Then you almost never need to modify it , It can be done through higher-order components
And a series of methods that can transform each other to realize the function expansion of the original component . This shift in thinking will allow you to save in future development 去很多重复的工作.强制使用的ES6语法,也可以为以后Java
的学习打好基础.

2.3 思想的提升

React
的学习中,你会接触到非常多开发理念或是软件工程相关的思想,也会看到很多细节优化和框架设计方面的东西,对构建工具的使用也会让你逐步熟悉现代化前端开发的流程.这些东西都不是
React独有的,你完全可以将所学习到的编码技术,设计模式,框架知识等应用在其他项目中,另外,对新技术保持一定的敏感性也是一个优秀前端的必备素养.

三. 没有实战项目,我应该如何学习React

如果没有一个实战项目,很容易在做完Demo之后就不知所措,而下一次的面试中被问及相关问题时,你也只能心里没底地告诉面试官“了解过”.对于React
的学习,笔者的建议是:通过关键词来学习核心原理(2.1节中提及的关键词应该优先学习).

关键词1——Virtual DOM

Virtual-DOM,即虚拟DOM树.浏览器在解析文件时,会将html文档转换为document对象,在浏览器环境中运行的脚本文件都可以获取到它,通过操作
document对象暴露的接口可以直接操作页面上的DOM节点.但是DOM操作是非常耗性能的,它会导致页面的重绘和重排.为了更好地处理DOM操作,提升项目性能,
Virtual-DOM技术就诞生了.

Virtual-DOM技术是前端高性能的基石,它是真实document对象的抽象,通过对比新旧Virtual-DOM
的区别,找出发生变化的DOM节点,再利用算法得到最优的DOM节点修改方案,最终再将方案应用在document对象上来改变页面的展示内容.

关键词2——先序深度优先遍历

无论是根据Virtual-DOM来重现真实的DOM节点,还是当数据模型变化后来对比新旧树结构的差异,都需要通过先序-深度优先算法
来遍历虚拟DOM树,逐个对比节点信息,从而达到目的.你完全可以在自己实现了Virtual-DOM
以后,尝试将其转换为真实的DOM转换到页面上.同时,基础算法的学习是非常有趣的,如果感兴趣,你也可以尝试去对比深度优先遍历的递归方法和栈方法,去了解广度优先遍历
,它们并不难实现,通过DOM这种可见结构来帮助自己学习略显抽象的搜索算法是非常好的学习路径,因为你可以很直观地看到算法的每一步是如何运行的.

关键词3——DOM-Diff算法

DOM-Diff算法,是指如何对比两棵虚拟DOM树之间的差异,并把这些差异转换为DOM节点真实变化的算法.React
做了一些能够明显降低算法时间复杂度的假定,让它变得高效.后文推荐的资料中有非常好的深度讲解的博文,其中将元素列表的变化抽象为求解字符串的最小编辑距离(Levenshtein
Distance)的部分非常精彩,笔者在此强烈推荐.你可以只去模拟其中1-2中简单的差别类型,来实现一下DOM-Diff
算法,看看能否将虚拟DOM树中的差异同步到自己的页面上.

前端框架几乎都是由【Virtual-DOM模型 + DOM-Diff算法 + 生命周期钩子】这样的骨架模型来建立的.

关键词4——Redux架构

Redux是状态管理架构范式Flux的实现,它并不一定要和React
配合才能使用.直观地来看,状态管理的思想把代码中一个简单的赋值操作搞的异常复杂,你需要搞明白这种对于简洁性的牺牲到底换来的是什么,才能真正确定你是否需要使用
Redux.状态管理和单向数据流的思想以及框架中是如何跟踪状态的同步变更和异步变更是学习的重点.单向数据流和双向数据绑定
并没有绝对的优劣之分,它们都有自己的适用场景,你应该在恰当的时候适用恰当的方式,而不是毫无根据地觉得某一个技术很牛逼.

关键词5——React-Router

前端路由的基本原理并不复杂,你可以参考笔者的另一篇博文《造轮子-前端路由的基本原理》
<https://bbs.huaweicloud.com/blogs/fbf6c64575e711e89fc57ca23e93a89f>
去了解.你需要了解的关键点,是React-Router
如何实现按需加载,如何实现前端路由和服务端渲染的兼容,底层的原理是什么.如果能借研究路由的匹配策略好好夯实一下正则表达式的相关知识那就更好了.

关键词6——×××(服务端渲染)

×××并不是什么新鲜的技术,事实上在Angularjs1.x
将SPA模型带到人们面前时,前端网页本来就是后端通过模板引擎来渲染,然后把整个HTML结构返回给前端,前端只负责展示就可以了.×××解决的问题,
是为了解决SPA模型首屏渲染速度慢的问题
,因为相比于传统的服务端渲染而言,SPA模型在首次访问时需要加载更多的脚本文件,然后才会开始渲染,而脚本加载期间的白屏造成的用户体验是很差的.×××
技术的实质就是将首屏渲染工作转移到服务端以求获得更快的渲染速度的技术,当然如何优雅地使用还涉及很多细节的问题.你需要去了解react-dom
是如何在服务端实现DOM字符串渲染的,事实上它和其他后端的模板引擎并没有本质的区别.你完全可以在自己已经存在的exprss或KOA
工程中手动实现页面的服务端渲染.

关键词7——ISOMorphic(同构)

不得不说这是一个逼格很高的概念,它是×××的升级.同构,实际上就是指同一套代码既能够运行在浏览器,也能够运行在服务端
运行.为什么通过SPA模型实现的前端应用要运行在服务端?答案是给搜索引擎看.由于爬虫只爬取静态页面的特点,依赖于ajax
的SPA模型在搜索引擎优化方面有着天然的劣势.我们在浏览器中看到的丰富的内容,在爬虫看来可能只是一堆空白的标签或是没有意义的内容.大型框架均提供了完整的解决方案(
Angular有Angular-Universal,Vue有Nuxt.js,React有Next.js
)好让你在使用对应的技术栈时更好地实现同构,你可以挑选其中之一来进行简单学习,加深对同构的直观理解.如果有SEO相关的需求,直接去学习使用就好了.

这些关键词并不代表React的全部精华,但已足够让你为一个真正的React
项目做好准备,甚至你会发现自己对于React的理解,比很多经历过实战项目的开发者还要深刻.

四. 资料推荐

React
全家桶是非常庞大的,笔者自己在学习中阅读到了很多非常优秀的资料,觉得并没有必要再重复去写相关博文,在此将一些必要的或是优质的资源推荐给想要学习的读者们,愿你们在
React学习中获得进步.

1. 阮一峰的ES6教程 http://es6.ruanyifeng.com/ <http://es6.ruanyifeng.com/>

这个推荐可能有点多余,你在网上能找到的许多ES6的资料都是它的复制版.

2. React中文网 https://doc.react-china.org <https://doc.react-china.org/>

阅读官方文档是第一步,文档中的【高级】部分似乎在手机上无法显示,需要在PC端阅读.

3. React-Router路由文档 https://reacttraining.com/react-router
<https://reacttraining.com/react-router>

从最基本的用法到按需加载和服务端渲染,全部都有对应实例,非常走心的官方文档.

4. React小书 http://huziketang.mangojuice.top/books/react
<http://huziketang.mangojuice.top/books/react>

如果除官方文档以外,你只有时间读一本书,那便是这本了.开源的45篇博文,通过问题 + 推演 + 实例的方式让你了解React
中每个部分存在的必要性和程序设计的考虑点,无疑是笔者读过的资料里最好的.

5. 深度解析Virtual-Dom的实现算法 https://github.com/livoras/blog/issues/13
<https://github.com/livoras/blog/issues/13>

讲述Virtual-DOM的非常棒的一篇博文,值得一读,毕竟Virtual-DOM是前端框架的基础.

6. Redux中文文档 https://github.com/camsong/redux-in-chinese
<https://github.com/camsong/redux-in-chinese>

来自github的文档资源,提供各种格式的电子书.

7. Redux带中文注释源码https://github.com/KyrieChen/redux-chinese-comment
<https://github.com/KyrieChen/redux-chinese-comment>

redux的代码并不多,理解了思想和使用方法后,从源代码的编写也能够学习到很多宝贵的经验.

8. 慕课网关于React的课程 http://www.mooc.com <http://www.mooc.com/>

慕课网有非常多高质量的React入门课程.

送个【彩蛋】给阅读到最后的你~~

全球最大的同×××友网站github上,有一个非常棒的awesome系列的项目,几乎每一个你用到的技术栈,都对应着这样一个导航类的开源项目(例如
awesome-react <https://github.com/enaqx/awesome-react>),其中收录了包含基础教程,视频教程,插件生态,
高级技术,源码解读等非常非常多资源的地址,其他的就不用我多说喽~