author ： The desert is poor in autumn
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 .
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 .
There are two benefits of componentization ：
All frames , No matter what language is used to achieve , There are some basic problems that need to be solved .
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 ：
Please note that , all UI Components are almost designed like this , What about? , Do you still need to memorize those contents ？ Ha ha ha .
OK, Whatever UI frame , With UI After component , Then we need to solve the problem of communication between components .
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 .
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 .
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 ？
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 ：
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 .
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 .
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 .
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 ：
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 ：
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 .
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 .
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 ：
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 ：
This time I deliberately recorded , upgrade 、 There are two main ways to modify all the code ：
The whole upgrade process is very smooth , You don't have to worry .
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