Catalog

* One. Front end fighting and upgrading Guide
<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 Two 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 studyReact
<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. No actual project, How should I learnReact
<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. Data 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 the unified Jianghu》 Series is your own front-end learning notes, Aims to introducejavascript Application cases in the field of non web development and discovery of all kinds of funjs library, Irregular update. If you understand the front end or write page binding events,, Then you are really a little bitOUT 了, There are so many things the front end can do,
Mobile phoneapp Development , Desktop application development , Library for artificial intelligence of neural network , Page game , Data visualization , Even to the extent that Embedded development , Whatever the fire is, Take off a hot spot
. If you think the daily development of the front end is boring, Let's take a look at the front end.. If this series works for you, Please like it for me, Support me to continue writing.




One. Front end fighting and upgrading Guide


Many front-end developers, They all start from proficient use of framework for business logic development.. Speaking of frames,Vue,React,Angular
All three frameworks have defined their own user groups, In terms of the number of fans,Vue most, Next isReact, Last isAngular
, In fact, this situation is not completely related to the advantages and disadvantages of the three frameworks themselves.. If you've used itAngular.js1.X Edition, It will be clear 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 staySPA Some problems in the implementation of the model; From the perspective of the future, They're all in the process of not standardizing.Web
Component standard. If it is only used skillfullyAPI Develop business logic
As a measure, So there is no substantive difference between understanding one framework and understanding the three frameworks. Unless the interviewer himself is a product, Otherwise, it's almost impossible to give you more money..


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 bird in the group, Learn the team's component development paradigm and take notes, Familiar with the ecology of framework, Familiar with theAPI Wait, Accumulate experience to improve level, Complete the initial
Novice-> Transfer of front-end developers.

1.1 Which framework should I start from?

Many novices have such questions, My suggestion isVue->React->Angular.

Vue
It's the most popular, Grammatical simplicity, High community activity, The largest number of users. And almost all of the more complex problems have complete solutions. Business logic will be available soon, And make continuous progress in the work, If you are not a skilled front-end developer, You should give priority to it.

React Is the second framework you should learn, Its development model is actually similar toVue Very similar, But inVue You can only useES5 Developing the grammar of, But notES6 Basic knowledge of, You may even
React Projectdemo It's difficult to read(React from16.0 Version has removed theES5 MethodcreateClass RecommendedES6
To achieve), At the same time, the browser can't run the strange code directly. You have to learn a whole set of things likeES6,Babel,Nodejs,Webpack
Wait, what you hear often but don't study.. StudyReact Purpose, It's not for you to use another set.API Refactor your 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 or even painful, But in the end, you'll find that your investment is worth it..

Angular Technology stack and ecology can be selected as learning content, If you likeJava That rigorous way of programming, You may like this combination of front and back technology stacks, In factAngular
It's also the choice for many back-end students to flip the front-end.( That is, back end full stack engineer). But it can be hard for developers to understand from the frontJava
Abstraction at all levels in, Let alone the design mode and surrounding ecology. Compared with the first two,Angular It's more like an old academic, Wordy but precise, It requires you to use it immediatelyJavascript
At the same time of this toy language, We still need to write code with complete thinking and process of software engineering.. But whether or not it needs further study, I suggest that you can browse related technology stacks and various blogs..

When you can use it skillfullyVue orReact Technology stack and surrounding ecological time, Your ability can be called a front-end developer.
了, There's a clear distance between them and the front-end rookies who can't sort out the basic business logic.. At this time, you need to make a choice about your future. The sun also needs a lens to focus in order to light the paper. You should also focus on a more desirable direction.

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.

♕ Job description—— Front end Engineer

Skill book of front end Engineer, Based onnode.js Starting to expand. In this stage of learning, You need to master two major skill modules—— Extension writing and front end Engineering, Which means you need
Change from user oriented to developer oriented and the whole front-end project as much as possible. Extending the ability to write allows you to package common modules for other developers on your team, Front end Engineering
Enables other developers in the team to focus on the front-end business logic itself.

*
Extended writing

Basic component abstraction, You need to be able to write extensions or common components for various frameworks and tools, For example, compilingjQuery Plug-in unit,Angularjs Custom instruction,React assembly,
webpack orgulp Function extension component, Even useC++ bynode.js Write native extensions, etc. You can even try adding custom extensions to your encapsulated components
Support for, It can help you better use the technology stack of your choice, Finish from“ Process oriented programming” reach“ object-oriented programming” Transformation of basic thinking mode of, So you don't have to write things over and over again..

*
Front end Engineering


Development other than coding, deploy, test, Implementation of front-end workflow in a series of links such as online and monitoring. For developers, After the code is written, the test is finished. For front-end engineers, Code writing is just a part of the whole workflow, You know, it's not the code you wrote that doesn't report errors. It means that it can be displayed correctly in front of users.. The front-end automation engineering provides a complete set of code processing flow, Let's add prefixes and suffixes, for example,CSShack, grammatical transformation, Picture merging, Code confusion, Code segmentation and other functions become automatic..

♕ Job description—— Junior Graphics Engineer

If you're not interested in taking control of the whole project,, Maybe you can think about the direction of graphics, Skill book of junior Graphics Engineer, Based onUI To expand.. graphics
It's actually a very broad concept. The author's personal understanding of graphics is to include data visualization. seniorUI 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 achievement. You feel like making a game out of a bunch of simple materials and ideas, and making a game out of a bunch of frameworks and dependencies.
Hello world Which is more interesting? Most people choose the former. But in fact, most of the primary front-end development doesn't have much chance to touch the development in this direction. Because graphics
Large data sets often need to be processed, Which means it and performance
These two words are directly linked, Most of the primary front ends do not have the ability to solve problems in this direction.. Want to make a difference in this career direction, The learning to be completed in the initial stage includes:

*
Basic realization of data visualization

Able to use it skillfullyEcharts perhapsD3 Realize basic data visualization.

*
CSS3D,SVG,Canvas Relevant development capabilities of

You need to relearnCSS3D,SVG,Canvas
These technologies may not be used in normal projects. Because of the challenges you face, No more adjustmentsdiv The layout of the element or the size of the box model, It is the development of all kinds of vector graphics and even 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 Two transfer

please remember, When you have the ability to make the following choices, You're already qualified for most of the jobs in your career.

♕ Advanced career introduction—— Front end architect

A front-end architect, Need to start researching the source code of various frameworks, Study the data structure, Design pattern, 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 all kinds of technical problems.

♕ Advanced career introduction—— Senior Graphics Engineer


The development work of senior graphics engineer needs to complement the design work, Transform a table into a histogram, That's not graphics.. Senior Graphics Engineer, Can give design works that are not inferior to designers, Can make elegant and interactive front 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, Based onH5 Game framework development page Tour Based on, Or continue to expand the technology stack to
cocos2d Orunity This more professional framework engine, Even the bulls are pushing themselves to develop high-performance engines. It all depends on your own efforts and willingness.

1.4 Transfer- Other

Of course, In the process of front-end progress, It's quite possible that you will eventually become a back-end Engineer, project manager, System Engineer, Algorithmic engineers and so on, Or into things like artificial intelligence. Big data analysis, virtual reality,
Augmented reality continues to explore and grow in a very popular direction. But always remember, Language itself is not a barrier to your entry into a certain field, program= data structure+ algorithm, It is not subject to language categories, Not only
python To develop artificial intelligence, Not onlyC++ To develop games, Limit your own, Only your own will.

Two. Why should you studyReact

The furthest distance in the world is not from heaven to hell, It's a demand line."Hello World", I did it for weeks..

2.1 Extension of technology stack

React It's not just a framework. A new front-end workflow.

You need to learnES6 Or updatedjavascript Standard, To understandReact A lot of strange looking grammar.;

You need to learn how to useBabel, So I can write it myself.jsx Code andES6 The syntax code is eventually translated into code that the browser can recognize;

You need to relearnjavascript Object oriented programming to understand the basic principles of component implementation;

You need to deepenjavascript Basic knowledge understanding, To better understand the beauty of high-level usage such as high-level components;

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

You need to learnWebpack, To manage the construction and resources of the entire front-end project;

......

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

2.2 Component development

Component development is a trend of modern front-end development, You need to experience it in developmentReact Meaning of components in, If the component design is reasonable, So you almost never need to change it again. Instead, you can use high-level components
And a series of mutual conversion ways to realize the function expansion of the original components.. This change of thinking will save you in the 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>),其中收录了包含基础教程,视频教程,插件生态,
高级技术,源码解读等非常非常多资源的地址,其他的就不用我多说喽~