The front-end frame is tens of millions, grasping two main lines into half

Wei 1 2020-11-13 06:33:19
front-end end frame tens millions

author : The desert is poor in autumn

The front-end frame with a hundred flowers in bloom

2007 I just graduated in , At that time, the most popular front-end framework was jQuery and Ext JS, At that time, the problem that people were struggling with was : I'm using it jQuery Or use Ext JS Well ?

And then it came :Adobe Flex、Microsoft SilverLight、Dojo、Ember、Backbone、RequireJS… A lot of frames .

from 2008 Year to now , The front-end framework that you can see on the market is no less than 10 Kind of , It's really overwhelming .
 Insert picture description here

In the course of this development , The size and size of the framework is also increasing , The most ancient prototype.js and mootools, Only a few thousand lines JS Code , The volume after compression is only 10 K about . To 2006 year jQuery When it appears , The volume has expanded 10 Times to 100 K about , The biggest 、 The most perfect is Ext JS, current 6.x In the version , light JS The code is as high as 24 Ten thousand lines of code ( With comments )!

Word God ! I really can't learn !

friend , You're still too young , It's not as complicated as you think , Behind the myriad appearances , There is a simple law behind it . actually , All the front-end frameworks on the market are solving two big problems : Componentization and modularization .

Common question one : How to realize componentization

There are two benefits of componentization :

  • Functional encapsulation
  • Reuse across projects

All frames , No matter what language is used to achieve , There are some basic problems that need to be solved .

  • How to design the life cycle of a component ?

As you know , The front end features UI Interface , It's something that needs to interact directly with users .

therefore , You have to do this for UI Complete life cycle of component design , From the ancient Java Swing To QT, Until jQueryUI、Angular、React, Everyone has designed their own life cycle mechanism . Although the technical details are different , But the basic structure is similar , All need to go through several basic stages : initialization 、 Rendering 、 Survival period 、 The destruction . Look at the diagram :
 Insert picture description here

Please note that , all UI Components are almost designed like this , What about? , Do you still need to memorize those contents ? Ha ha ha .

  • How the components communicate ?

OK, Whatever UI frame , With UI After component , Then we need to solve the problem of communication between components .
 Insert picture description here

As long as you can solve the following 3 This will solve most of the problems : How to communicate between father and son ? How do brothers communicate ? How to communicate with distant relatives ?

Whatever frame , Typical solutions are 3 Kind of : Communication between parents and children through events or direct calls ; brother 、 Distant relatives use event bus for communication ; utilize cookie、localstorage、 Even the server session To communicate .

  • How to manage the state of components ?

UI Components don't just have appearance , The appearance is just a picture , It needs data , Now that there's data , It's about state management .
 Insert picture description here

In state management , These questions need to be carefully designed : Do you need two-way binding ? How to cooperate with routing to keep component state ?

  • How to do the component style ?

Because it's the front-end framework , So the problem of beauty should not be relaxed . fortunately , In the era of mobile Internet , Users are used to “ flat ”、“ minimalism ” These design styles , We can make use of the existing CSS Style library for our components “ Make up ”, These are commonly used :
 Insert picture description here
 Insert picture description here

Common question two : How to achieve modularity

As you know , stay Java Inside , We have perfect Class/Package/Jar/ClassLoader The support of these mechanisms . When JVM Find what you need .class When the file is not loaded , It can use ClassLoader To load the , No need for programmers to worry about .

But in JS Not in it , because JavaScript The flaw of the language itself , It doesn't provide complete Modularity Support , This leads to the fact that all front-end frameworks have to solve the problem of modularity by themselves .
 Insert picture description here

however , thankfully , We have it. Node.js, With Webpack, I don't have to do it myself like I did a few years ago RequireJS 了 ! That's why the mainstream front-end frameworks on the market use Webpack To make your own CLI Why .
 Insert picture description here
 Insert picture description here
summary : No matter what front-end framework you are currently using , No matter what front-end framework you want to learn later , Just fasten “ Componentization ” and “ modularization ” These two main lines , There will be a general direction in my heart , Never get lost in the vast number of technical details .

The above describes the two main lines of learning front-end framework , But how to learn it ? With Angular For example , I share my experience with you , I hope you will finish this course , You can avoid common development mistakes 、 Get on the ground fast .

Why should I watch this course

Some friends may ask :Angular Relevant articles are everywhere , Why do I come to study this course ?

This is a very good question , Explain that you have quality requirements for the content you read .

If I were , I also have such doubts .

On the whole , The content of this course has the following features .

lately 5 I've been in “ play ” Front end things , such as jQuery、SVG、Ext JS、Adobe Flex、Angular; Especially in 2016 year , This whole year I represent Angular The project team promotes technology in China . therefore , I will Follow the general learning process of beginners , In my own language Step by step .

Here 5 In the year , I'm overtaking 50 companies 、 Open source organization 、 There was a lot of talk in the University , A lot of videos and articles have been published on the Internet . In the process of running around , Got to know a lot of people , Experienced back-end developers 、 There are also new beginners , They told me a lot about their own confusion , I will Some common questions are incorporated into the content .

I will, too Clean up the common pits in daily development , Most of these holes are feedback from developers , Or I make complaints about it . Take a few typical examples :

  • A lot of developers come to me and complain about , stay Windows On the platform @angular/cli There will be a lot of error, That's because @angular/cli stay Windows The platform depends on Python and Visual Studio Environmental Science , And many developers don't have these things installed on their machines . Why rely on these environments ? Because of some npm The package needs to be compiled locally .
  • node-sass Module by wall problem , Highly recommended cnpm Installation ( Click here to jump to the installation address ), It's very effective to avoid hitting the wall .
  • Some developers came to complain that @angular/cli Add it when you pack it –prod The parameter will report an error , Can't compile . This is a very common problem , because @angular/cli The latest version often has bug, Just in the project of package.json Reduce a small version number in it OK 了 . in addition , Add –prod After the parameters , The compiler will do more stringent checks , If there are useless components or configuration errors , It's hard to compile .
  • @angular/cli Default generated karma.conf.js In the configuration file, a file with bug Of HTML Report generator , Lead to ng test Operation error reporting , We need to take this reporter Change to mocha( mocha ), For specific configuration and examples, please refer to “ The first 10 course : automated testing ” Explanation in .
  • Other developers say , It works very well in local development , All requests after online 404. This is also a common pit , Because you need to give Web The container is configured to handle HTTP The rules of the request , Throw the front-end route back to Angular Handle , You can click here to see the details .

There are still many pits like this , I stepped on it one by one . Of course , I believe readers can step on it , But in terms of saving time , Isn't it faster to follow my train of thought ?

This course is all about usage , Covering the most frequently used features in daily development , Unless you have to , Try not to talk about the principle . For a long time , I find that there are many misunderstandings in the way readers learn , such as , Some people come up and study “ Change detection ” Principle , also RxJS Principle , It doesn't do you any good except to undermine your own self-confidence . Because sooner or later you will find out , In the field of computer , Everything that goes to the bottom is like “ Algorithm ”、“ data structure ”、“ Design patterns ” of .

as far as I am concerned , Many readers don't usually study the basic knowledge of these contents , therefore , I recommend A more pragmatic approach , First learn how to use , I'm familiar with it , Have the time 、 When you have leisure, you can study the underlying principles . It's hard to design an engine , But it's not hard to learn how to drive , Right ? So my goal in writing this course is very simple , It's about learning how to drive , Instead of teaching you to design engines .

This course is very important “ conceptual model ”(Mental Model) The construction of . I find , A lot of developers have done a lot of projects , But when you talk to him , It will soon be found that he did not grasp the essence of the door frame . For example :

  • When someone mentions Spring When , The first thing in your brain must be DI、IoC、AOP Wait for these core concepts ;
  • When someone mentions Hibernate、MyBatis、JPA When , Your brain will immediately come up with ORM And so on ;
  • When someone mentions React When , What you think of should be VDOM、JSX;
  • When someone mentions jQuery When , Your first thought should be $, Right ?

therefore , You can see , Any successful framework has its own unique “ conceptual model ”, Or call it “ The core value of ” It's fine too , This is the value of the framework itself , These core concepts are the main thread to grasp the framework , Instead of getting caught up in the vast technical details .

The course involves The total number of examples is about 300 individual , There are a few examples from official documents ( about 5 individual ), Other examples are all manually typed out by myself . I divide these examples into 10 Open source projects , They are independent of each other , Convenient for readers to refer to and practice .

Reader feedback

For a year , Received a lot of feedback from readers , thank you all . Here are some excerpts , For the reference of other readers . In order not to disturb these friends , Part of it is anonymous .
 Insert picture description here


This course is Angular Basic course , The goal is to lead the readers to the actual combat quickly . Courses to 3 Three core concepts as the main line ( Components 、 Routing and modules ) And features that must be used in the business development process ( Tools 、 Instructions 、 Forms 、RxJS、i18n、 test ) Let's talk about it .

In addition to this 3 The core concepts have strong relevance , Everything else is completely independent , You can read it at any time when you use it . The syringe part is a little more complicated , Not much is used in the daily development process .

After studying this course carefully , Will have a deep understanding of the new version Angular Conceptual model of , With the use of Angular The basic ability to start development .

The detailed outline is as follows :
 Insert picture description here

What are the contents of the upgrade

Angular This talent course has been released for a whole year ,2018 year 10 month ,Angular 7.0 As promised .

It took me some time to upgrade all the graphic content and instance code of the course to the latest version , Include :

  • proofreading 、 Supplement the picture and text course
  • Hundreds of small examples associated with the tutorial
  • 3 A comprehensive project ,1 individual To C A portal project of type 、1 individual To B Type of backstage management project 、1 Mobile terminals PWA project

This time I deliberately recorded , upgrade 、 There are two main ways to modify all the code :

  • Check each one Node.js Version compatibility of modules ( It's a little cumbersome to do by hand )
  • RxJS Some writing changes caused by the upgrade

The whole upgrade process is very smooth , You don't have to worry .

  • After the revision, there are 46 An article .
  • The code of all related projects has been upgraded to the latest Angular 7.0 edition ,NiceFish、OpenWMS、learn-* series , Keep the text content synchronized with the instance code .
  • Integrate the latest version 5.0、6.0、7.0, The revision 、 Added some text , such as Angular 5.0 Newly added 8 Routing events, etc .
  • Modified some data and charts , Use the most current data (2018 year 10 month 30 Japan ).
  • Some drawings have been modified .
  • increase 3 Appendices , explain 5.0、6.0、7.0 What has been updated .

The authors introduce

The desert is poor in autumn ,10 Years of development experience , among 5 Back end of the year 、5 Year front end . be familiar with Java Relevant technical system :Spring MVC、MyBatis、Ehcache、ELK、MySQL etc. . Especially in the front-end technology , Has been used and studied successively Flex、jQuery、Ext JS、Backbone、Bootstrap、Angular And other common front-end technology systems .

2016 ~ 2017 During the year , As a Angular Developer PM, Specifically to help Google Angular Team promotion in China Angular frame .

Published 《Ext Rivers and lakes 》 A Book , Translated and published 《ActionScript 3.0 Game Design Basics ( The second edition )》《 use AngularJS Develop the next generation Web application 》《 March towards Angular 2》 Three books .

In the past, including Taiwan 50 Many state-owned enterprises 、 private enterprise 、 foreign enterprise 、 Open source organizations and others have made a lot of speeches , Well received by the community .2016 ~ 2017 year , I used to be Google Angular Full time promotion of the framework in China ,Title yes Angular Developer PM.

Scan the QR code or Click here to try and buy
 Insert picture description here

本文为[Wei 1]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple