Unified's Big Front (7) react.js-from developer to engineer

Starting Link: https://bbs.huaweicloud.com/blogs/70f69ca4953111e89fc57ca23e93a89f
"The big front of the Unified Lake" series is their own front-end learning notes, designed to introduce JavaScript in the non-web development field of application cases and find all kinds of Fun JS library, not regularly updated. If you understand the front-end or write page binding event, then you really are a little out, the front-end can do things already too much,,,,, 手机app开发 桌面应用开发 用于神经网络人工智能的库 页面游戏 数据可视化 and even 嵌入式开发 , what fire on what, berthelot off a rubbing hot little expert . If you also feel that the front-end of the daily development is a bit dull, you might as well look at the front end of another appearance. If this series is useful to you, please praise me and support me to continue writing.

[TOC]

I. Front-end play Monster Upgrade Guide

Many of the developers in the front-end are starting with a skilled use framework for business logic development. As for the framework, the Vue React Angular three frameworks have already delineated their own user base, from the number of fans, the Vue most, and then React , finally, the Angular situation is actually not entirely related to the merits of the three frameworks themselves. If you use a Angular.js1.X version, you will understand that the above three frameworks can be collectively referred to as the second-generation front-end spa framework , from a historical point of view, they have in their own way to solve the Angular.js1.X spa model in the implementation of some problems; from the perspective of the future, They are all in the implementation of the Web Component Standard that has not yet been standardized. If you only use the API for business logic development as a measure, then there is no real difference between understanding a framework and understanding the three frameworks above, unless the interviewer himself is a parallel, it is impossible to give you a little more salary.

If your project team is already using a certain framework, then for a newcomer, you only need to write the business logic tasks assigned to them, read the code of the veteran in the group, learn the team's component development paradigm and take notes, familiar with the framework of the ecology, familiar with various libraries of the API and so on, accumulate experience to upgrade the level, Complete the initial beginner-to- front developer Transfer.

1.1 Which framework should I start to learn from?

Many novices have this question, the author's advice is Vue React Angular .

VueIs the most popular, concise grammar, community activity is high, the number of people use the most. And there's almost always a complete solution to a slightly more complex problem, and you'll soon be able to get started with business logic and continue to progress in your work, and if you're not a skilled front-end developer, you should prioritize learning it.

ReactIs the second you should learn the framework, its development pattern is actually and Vue very similar, but in the Vue you can also only use ES5 the syntax for development, without ES6 the basic knowledge, you may even the React project demo reading is difficult (React Since version 16.0 has been removed from the method of creating the component ES5 createClass and ES6 The recommended inheritance is implemented), and the browser cannot run the strange code directly, you have to learn ES6 Babel Nodejs Webpack A whole set of things like,,, Things that are often heard and not studied. ReactThe purpose of learning is not to let you use another set of APIs to refactor your project, but rather to force yourself to extend the technology stack to the full front , and begin to focus on knowledge beyond page development, the process of learning may be long or even painful, But in the end you will find that your investment is worth it.

AngularTechnology stacks and ecology can be chosen as the content, if you like Java that rigorous programming, you might like this front-end technology stack combination, in fact, Angular many back-end classmate Daoteng front-end choice (that is, back-end full stack engineer). But developers who come into contact with the program from the front end may find it hard to understand Java the abstraction at all levels, not to mention design patterns and the surrounding ecology. Compared to the former two, Angular more like a college school of the old scholar, verbose but rigorous, it requires you to use Javascript this toy language at the same time, still need to use a complete software engineering thinking and process to write code. But whether you want to delve into it or not, I recommend that you be able to browse the relevant technology stacks and various blog posts.

When it comes to skilled use Vue or React technology stacks and the surrounding ecology, your ability can already be called a front-end developer , with a noticeable distance from front-end novices who don't even know what the basic business logic is. At this point you need to make a choice for your future, and the sun needs a lens focus to ignite the paper, and you should focus your energies on a more desired direction.

1.2 One-time transfer

Keep in mind that when you have the ability to make the following choices, you are already capable of doing most of the work for front-end developers .

? Career introduction-front-end engineer

The skill Book of the front-end engineer is based on node.js the beginning of the extension. In this phase of learning, you need to master two large skill modules-- 扩展编写 and 前端工程化 , in other words, you need to transform from user-facing to developer and the entire front-end project as much as possible . 扩展编写capabilities allow you to encapsulate common modules for other developers of your team, 前端工程化 allowing other developers in the team to focus on the front-end business logic itself.

• extension Writing

  refers to the basic component abstraction capabilities, you need to master the ability to write extensions or common components for various frameworks and tools, such as writing the jQuery plugin, Angularjs Custom directives, React components, webpack or Gulp feature extension components, even using C + + as node. js write native extensions and so on, and even try to add the support features of the custom extension to your own packaged components, which can help you better use the technology stack of your choice and complete the basic mindset shift from process-oriented programming to object-oriented programming , so that you no longer have to write repetitive things endlessly.

• front-end engineering

  is the implementation of a front-end workflow that is developed, deployed, tested, on-line, and monitored, in addition to code writing. For developers, the end of the code after the completion of the test, and the front-end engineer, the code is just a part of the entire workflow, to know that you do not write the code does not error, it means that it can be correctly displayed in front of the user. Front-end Automation engineering provides a complete set of code-processing processes that automate a range of functions such as adding prefix suffixes, csshack, syntax conversions, image merging, code obfuscation, code splitting, and so on.

  ? Career Introduction--Junior graphics engineer

If you are not interested in controlling the whole project, you may want to consider the direction of graphics , and the skills Book of the primary graphics engineer is based on UI the extension. Graphics is actually a very broad concept, the author's personal understanding of the graphics is roughly included,,, 数据可视化 and this is a 高级UI设计开发 GIS 游戏 few common subdivision directions. Graphics are more lively and interesting than architectural orientation, and it's easier to give developers a sense of accomplishment. Do you think it is more interesting to make a game with a bunch of primitive materials and ideas and make a Hello world with a lot of frames and dependencies? Most people will choose the former. But in fact most of the primary front-end development does not have much opportunity to touch the development of this direction, because graphics often need to deal with a large data set, it means that it is directly linked to the performance of the word, The primary front end is mostly not capable of solving problems in this direction. To be successful in this professional direction, the initial stages of learning include:

• 数据可视化The basic implementation

  Ability to use Echarts or D3 implement basic data visualization.

• CSS3D, SVG and Canvas the related development capabilities

  You need to re-learn the CSS3D SVG techniques that Canvas may not be used in your usual projects. Because the challenge you're facing is not to tweak the layout of the DIV elements or modify the size of the box model, but rather the development of pixel-level levels for all kinds of vector graphics and even large data volumes.

• UI design and dynamic design

  You need to supplement the knowledge and skills of many design classes to improve your own aesthetics and output the quality of your work.

1.3 Two-time job transfer

Keep in mind that when you have the ability to make the following choices, you are already capable of doing most of the work for a career .

? Advanced Career Introduction-front-end architect

A front-end architect needs to start studying various frameworks 源代码 , study them, and, 数据结构 设计模式 核心算法 as far as possible, optimize the overall performance of the code from every aspect, and provide a language-to-architecture-level solution for a variety of technical issues.

? Advanced Career Introduction-Senior graphic engineer

The development of advanced graphics engineers is a need to complement the design, transforming a table into a histogram, which is not called graphics. Advanced graphics engineers can give design works that are not lost to designers, can create elegant and interactive front-end pages, and can constantly optimize code performance to speed up rendering.

? Advanced Career Introduction--game engineer

With the skills of a primary graphics engineer, plus 高中物理 高中数学 knowledge, you can develop a front-end game, use a H5-based game framework to develop a page tour, or continue to expand your technology stack to cocos2d unity a more professional framework engine. Even if you develop a high-performance engine, it all depends on your own efforts and intentions.

1.4 Transfer-Other

Of course, in the process of front-end progress, you can eventually become a back-end engineer , project manager , system engineer , algorithmic engineer and so on different roles, or to enter such as, 人工智能 大数据分析 虚拟现实, and 增强现实 so on a very hot direction to continue their own exploration and growth, but please always remember that the language itself is not you into a field of obstruction, program = data structure + algorithm , it is not subject to the language category, not only python to engage in artificial intelligence, It is not only the C++ ability to develop the game, limit their own, only their own will.

Two. Why should you study react

The furthest distance in the world is not heaven to hell, but the need for only one line of "Hello World", and I have been doing it for several weeks.

2.1 Extension of the technology stack

ReactIt's not just a framework, it's a new front-end workflow.

You need to learn ES6 or update the javascript specifications in order to figure out React a whole bunch of seemingly strange grammars;

You need to learn to use the code and grammar that you write so that you can eventually translate the code that the Babel jsx ES6 Browser recognizes;

You need to re javascript面向对象编程 -learn to understand the basic implementation principle of the component;

You need to deepen your javascript基础知识 understanding in order to better understand the beauty of such 高阶组件 advanced usage;

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

You need to learn to Webpack manage the construction and resources of the entire front-end project;

......

After one months, you will finally be able to understand React how to output a "Hello world" in a blank page step-by-step.

2.2 Component Development

Component development is a trend of modern front-end development, you need to carefully understand the meaning of components in development, React if the component design is reasonable, then you almost never need to modify it , but can be 高阶组件 And so on a series of ways can be converted to the original component of the functional expansion. This shift in thinking will allow you to save a lot of repetitive work in future development. Mandatory use of the ES6 grammar, but also for future Java learning to lay a good foundation.

2.3 Ascension of the Mind

ReactStudy, you will be exposed to a lot of development ideas or software engineering-related ideas, you will see many details optimization and framework design, the use of building tools will also allow you to gradually familiarize yourself with the modern front-end development process. These things are not React unique, you can fully learn the coding technology, design patterns, framework knowledge and other applications in other projects, in addition, the new technology to maintain a certain sensitivity is also a good front-end of the necessary quality.

Three. No actual combat project, how should I learn react

If you don't have a real-time project, it's easy to get overwhelmed after you finish the demo, and when asked about the next interview, you can only tell the interviewer to "know". For React The study, the author's advice is: through the key words to learn the core principles (2.1 Mentioned in the keywords should be preferred to learn).

Keyword 1--virtual DOM

Virtual-dom, which is the virtual DOM tree. When the browser parses a file, the html document is converted to an document object, the script file running in the browser environment can be obtained, and the document interface exposed by the action object can manipulate the DOM node on the page directly. However, DOM operations are very performance-intensive, which results in redrawing and rearrangement of pages. To better handle DOM operations and improve project performance, Virtual-DOM technology is born.

Virtual-DOMTechnology is the cornerstone of the front-end high-performance, it is document the real object of abstraction, by comparing the old and new Virtual-DOM differences, to find the changes in the DOM node, and then use the algorithm to get the best DOM node modification scheme, and finally the application of the program on the document object to change the content of the page.

Keyword 2--First order depth priority traversal

Whether it is Virtual-DOM to reproduce the actual DOM node, or when the data model changes later compared to the old and new tree structure differences, we need to through the first order-depth first algorithm to traverse the virtual DOM tree, one by one to compare node information, so as to achieve the goal. You can completely convert it to a Virtual-DOM real DOM and convert it to a page after you've implemented it yourself. At the same time, the basic algorithm of learning is very interesting, if interested, you can also try to compare depth-first traversal recursive method and stack method to understand the breadth-first traversal , they are not difficult to implement, Using the visible structure of the DOM to help you learn a slightly more abstract search algorithm is a great way to learn, because you can intuitively see how each step of the algorithm works.

Keyword 3--dom-diff algorithm

DOM-DiffAlgorithm, which is how to compare the differences between two virtual dom trees, and convert these differences to the real change of the DOM node algorithm. Reacthas made some assumptions that can significantly reduce the complexity of the algorithm's time, making it more efficient. In the following article, there is a very good in-depth blog post, in which the changes to the element list are abstracted to the smallest editing distance (Levenshtein Distance) of the string, which is highly recommended by the author. You can just simulate the simple difference type in 1-2, and implement DOM-Diff the algorithm to see if the differences in the virtual DOM tree can be synced to your page.

The front-end framework is almost always Virtual-DOM DOM-Diff built with skeleton models such as Model + algorithm + life cycle hooks.

Keyword 4--redux architecture

Reduxis the implementation of the state management architecture Paradigm Flux , which does not necessarily need to be React used with mates. Intuitively, the idea of state management complicates the operation of a simple assignment in the code, and you need to figure out what this is for the simplicity of the sacrifice in order to really determine if you need to use it Redux . The idea of state management and unidirectional data flow and how to track the state of synchronization changes and asynchronous changes in the framework are the focus of learning. one-way data flow and two-way data binding do not have the absolute merits and demerits, they all have their own application scenarios, you should apply the appropriate way at the right time, rather than the unfounded feeling that a certain technology is very good.

Keyword 5--react-router

The fundamentals of front-end routing are not complicated, so you can refer to the author's other blog post, "Making wheels-the fundamentals of front-end routing" to understand. The key point you need to understand is React-Router how to implement on-demand loading, how to implement the compatibility of front-end Routing and server-side rendering, and what the underlying principle is. It would be even better if we could take a look at the matching strategy of the routing to tamp down the regular expression knowledge.

Keyword 6--xxx (server-side rendering)

×××is not a new technology, in fact, Angularjs1.x when the spa model brought to people, the front page is the back end through the template engine to render, and then return the entire HTML structure to the front end, the front-end is only responsible for the display. ×××The problem solved is to solve the problem of slow rendering of the SPA model , because the SPA model needs to load more script files on first access than the traditional service-side rendering, before it starts rendering, and the user experience of the white screen during script loading is poor. ×××The essence of technology is the technology that shifts the first-screen rendering work to the server to get faster rendering speed, and, of course, how to gracefully use problems that involve a lot of detail. You need to understand react-dom how the DOM string rendering is implemented on the server side, in fact it has no essential difference from the other backend template engines. You can exprss KOA manually implement the service-side rendering of the page in your existing or project.

Keyword 7--isomorphic (isomorphic)

Have to say that this is a very high concept, it is ××× the upgrade. isomorphism, in effect, means that the same set of code can run in the browser and run on the server . Why are front-end applications implemented through SPA models running on the server? The answer is for the search engine to see . Because crawlers crawl only static pages, the SPA model that relies on it ajax has a natural disadvantage in search engine optimization. The rich content that we see in the browser may seem like a bunch of blank tags or meaningless content in a crawler. The large framework provides a complete solution (yes Angular , yes Angular-Universal , Vue Yes Nuxt.js React Next.js ) so that you can better achieve isomorphism when using the corresponding technology stack, and you may choose one of them for simple learning and to deepen the intuitive understanding of isomorphism. If there are SEO-related needs, go directly to learn to use it well.

These keywords do not represent React the essence of the whole, but are enough to prepare you for a real React project, and even you will find that your understanding of react is more profound than many developers who have experienced actual projects.

Four. Information recommendation

ReactFamily barrels is very large, the author himself in the study to read a lot of very good information, I feel that there is no need to repeat to write related blog, here will be some of the necessary or high-quality resources recommended to the readers who want to learn, may you React learn to progress.

1. Nanyi's ES6 tutorial http://es6.ruanyifeng.com/

This recommendation may be a bit redundant, and many of the materials you can find on the web are ES6 copies of it.

2. React Chinese web https://doc.react-china.org

Reading official documents is the first step, the "advanced" part of the document appears to be unavailable on the phone and needs to be read on the PC side.

3. React-router Routing Document Https://reacttraining.com/react-router

From the most basic usage to on-demand loading and server-side rendering, all have corresponding instances, very walk-in official documents.

4. React Small book Http://huziketang.mangojuice.top/books/react

If you only have time to read a book besides the official documents, that's it. Open Source 45 blog post, through the problem + deduction + instance way to let you understand the React necessity of each part and the design of the process of consideration, is undoubtedly the best I have read the information.

5. The implementation algorithm of deep analytic virtual-dom HTTPS://GITHUB.COM/LIVORAS/BLOG/ISSUES/13

A great blog post about Virtual-dom is worth reading, after all, Virtual-dom is the foundation of the front-end framework.

6. Redux Chinese document Https://github.com/camsong/redux-in-chinese

Documentation resources from GitHub, available in a variety of formats.

7. Redux with Chinese annotation source code https://github.com/KyrieChen/redux-chinese-comment

Redux code is not much, understand the idea and use of methods, from the source code to write can also learn a lot of valuable experience.

8. The course http://www.mooc.com about react in mu-net

Mu class network has a lot of high-quality React入门课程 .

Send an "egg" to read to the last you ~ ~

The world's largest and xxx friends github on the site, there is a very good awesome series of projects, almost every technology stack you use, all corresponding to such a navigation class of open source projects (such as Awesome-react), which contains the basic tutorial , Video Tutorials , plug-in ecology , Advanced technology , source interpretation and so very many resources address, the other will not need me to say more ~

Unified's Big Front (7) react.js-from developer to engineer