Introduction to front-end infrastructure and core
Technology stack selection
First of all, we need to have a thorough understanding of the front-end ecosystem to build the front-end architecture, and it is better to have a certain technical perspective. A good technical architecture may be convenient to expand in the future, reduce the number of reconstruction, and even the reconstruction does not need to make a big fuss. I usually choose the technology stack according to the following three points:
First, put forward their own business requirements
- Is SEO important?
- Mainly for: mobile or PC?
- Is there a plan to develop app?
With such a problem we can take the problem to focus on the selection of some of the more mature technical solutions to the problem of the technology stack.
Two, their maturity, whether the document is friendly
Here is an example of an actual development process in the past, in order to optimize the user experience and save development efficiency, the selection of a lightweight MVVM framework, unfortunately, the CTO did not have the decision, the selection of Avalon
At that time, the reason why there is no choice backbone, mainly because there is no mature Chinese documents, taking into account the team’s liquidity and overhand temporarily did not consider, the final choice of Situ Zhengmei avalon at that time is still relatively avant-garde, there are also some to go which network led by the large companies are in use. We were using Avalon2 shortly after it came out and went straight to 2.0, and we had a bit of a problem with it: Documents are discrete, one piece at a time, with postposition, less ecology and low cost performance for expansion. Sometimes, when encountering strange bugs, I may find the answer after searching the reasons for several times of demo and documents, but there is no key mark. It certainly made us a bit more efficient at the time, but I probably preferred Angular or Vue at the time. Because they have an unrivalled ecosystem and technical solutions for various issues, as well as a comprehensive developer documentation, it is worth mentioning that Avalon’s authors are maintained on a part-time basis, which I believe would be much better if avalon were operating on an all-stack basis. Looking at avalon’s source code would also help you a lot. We should be more careful about the technical selection of production.
3. Understand its ecosystem
I mentioned ecosystems above, and vUE, which I use a lot, The development of VUE has only officially provided us with 89 open source projects led by VUex, VUE-Router, VUe-Loader, VUE-CLI, vuepress, VUe-DevTools and VUE-SSR. Including countless VUE related UI libraries, Vue plug-ins and even Hybrid: Weex support provided by Taobao in the past two years
As of today, Github has 167,752 vUE related projects, 416,811 Angular related projects, and 594,272 React related projects.
Statistical time: September 1, 2018
I think with this kind of ecological support, we can fully meet more than 95% of the needs of our small and medium-sized projects, and it is meaningless to compare which is stronger.
Because I am familiar with it, I dare to choose VUE as the main structure of our SPA
Draw our desired front-end infrastructure model
Since we chose Vue in the last chapter, if we only consider the front end our initial idea: the technology stack looks something like this:
With node and Webpack support, vue component builds are packaged as traditional elements and published to HTTP services to request back-end services.
Then it might go something like this:
With the increasing number of mainstream third-party libraries and the technology’s early adoptions, the client side has either been forced to use them or has been proactive in referencing component libraries such as Babel less sass *. Loader and Hybrid.
The later technology stack needs to be improved gradually after we really step on the pit
Polyfill may be lazy loading XSS Protobuf for browser compatibility, speed optimization, SEO, communication protocol and other specific issues. So, early can not think too much, we just know: this problem we can solve, but now can not consider, some students, too “perfectionism” so that the idea is good, but to do a few days do not do, perfectionism kills people.
To understandWebpack
WebPack can be seen as a module packaging machine that analyzes the structure of your project to find JavaScript modules and other extensions that browsers don’t run directly: Stylus, Scss, less, TypeScript, CoffeeScript, etc., and convert and package them into appropriate formats for use by browsers. More commonly, you can also use webpack-dev-server for development mode hot updates
WebPack is a modular development solution
When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles
Webpack can support a variety of language and preprocessor written modules through loader, and finally packaged into one (or more) browser-aware *JavaScript CSS * files
List of loaders currently supported
Understand the ES6
The official story
ECMAScript 6 (ES6 for short) is a JavaScript language standard officially released in June 2015. It is officially named ECMAScript 2015. Its goal is to make the JavaScript language usable for writing complex, large-scale applications.
The popular science
A lot of people are always confused about ES, so let’s be honest: they are in order: ES5, ES6(ES2015), ES7, ES8
In June 2015, the first version of ES6, officially known as the ECMAScript 2015 Standard (ES2015 for short), was released as version 6.0 after 2011 ECMAScript 5.1. Minor revisions to the ECMAScript 2016 standard (ES2016 for short) The ECMAScript 2017 standard (ES2017 for short) was released in June 2017. It is actually version 6.2, but some people would call it ES8.
Just like Kubernetes people gave him the name K8S (there are 8 words between K and S), he is not standard
Understand the Babel Traceur
Babel/Traceur is a platform for compiling JavaScript that allows you to compile code for the following purposes:
JavaScript.next-to-JavaScript-of-today compiler
Use the JavaScript of the future today
As of release date (September 04, 2018), there are no JavaScript proxies that fully support ES6 (either in browser or server environments), so developers keen to use the language’s latest features will need to translate ES6 code into ES5 code.
Enables you to use the latest JavaScript code (ES6, ES7…) Regardless of whether the new standard is fully supported by current browsers;
ES7 writers have no time to read, but Bable is gradually replacing Google’s Traceur in the mainstream. I’m a Philistine, so I’ll go with Bable
To understandSass Less Stylus
Did Sass violate China’s advertising law?
Preprocessors like Sass, Stylus, and Less are extensions of native CSS and allow you to write CSS using features like variables, Nesting, mixins, inheritance, etc., that don’t exist in CSS, The CSS preprocessor can convert these special types of statements into browser-aware CSS statements.
- Compare three languages in one table
| language | implementation | features | The assignment | The indentation |
|---|---|---|---|---|
| Sass | Ruby | Variable $beginning | $var: value | Don’t need |
| Less | JavaSript | Variable at sign | @var: value | Don’t need |
| Stylus | NodeJs | Do not start with @ | var:10 | Can be |
Loaders: loaders: loaders: loaders: loaders: loaders: loaders: loaders: loaders
Less Loader Sass Loader Stylus Loader
Find it yourself: loader list
Like: Which language is better, more widely used and easier? Controversial bloggers don’t want to discuss it
To understandElectron
A framework that can use JavaScript, HTML and CSS to build cross-platform desktop applications, also a hybrid, the main scenario is PC, nothing to say.
It is worth mentioning that Visual Studio Code, Atom, GIthub Desktop are based on this build, sometimes press CMD + Option + I surprise oh
List of apps developed based on Electron
conclusion
These are basically the skeleton of the mainstream technology stack that is commonly used in the front end. After that, various Webpack plug-ins and various tool libraries are introduced into the model selection with the actual project. Now we can’t remember them.
Don’t worry, the front-end architecture is much more complex than it is now, so follow me step by step.
The next chapter is “How to Quickly Build a Project and Upgrade to a Standard Front-end Skeleton”.
About me
-
I am currently writing the “Before and after Separating Projects from Zero” series for revision and supplement
-
Constantly updated project practice address
The articles
Introduction to Separating WEB Projects before and after Building from Zero – The Meaning of Open Source
Separating Web Projects before and after Building from Zero: The Beginning – A look at the history of the Web
Split Web Projects before and after Building from Zero – an in-depth talk about split architecture before and after
“Separating Web Projects before and after Building from Zero” Preparation – Front End Understanding pass? Front-end infrastructure and technology introduction