My career: front-end research and development

background

The Web was originally for simple information transmission. With the evolution of technology, the information became richer and the interactivity gradually strengthened...

Static pages

主要以素材为主，展示logo，图片，样式布局，文案

(1) A static web page cannot be simply understood as a static web page. It mainly means that there is no program code in the web page, only HTML (ie: Hypertext Markup Language), and the general suffix is ​​.html, .htm, or .xml Wait. Although the content of a static web page will not change once it is created. However, static web pages also include some active parts, which are mainly GIF animations, etc.

(2) To open a static web page, the user can directly double-click, and the content of the page opened by anyone at any time remains unchanged.

dynamic webpages:

具有交互性

(1) Dynamic webpage refers to a webpage programming technology as opposed to static webpages. In addition to HTML tags, the webpage files of dynamic webpages also include program codes for some specific functions. These codes can enable the browser and the server to interact, so the server side dynamically generates webpage content according to different requests from clients.

That is: Compared with static web pages, dynamic web pages have the same page code, but the displayed content can change with time, environment, or the result of database operations.

(2) Dynamic webpages are not directly related to visual dynamic effects such as various animations and rolling subtitles on the webpage. Dynamic webpages can also be pure text content or content containing various animations. These are only specific webpages. The presentation form of the content, regardless of whether the web page has a dynamic effect, as long as it is a web page generated using dynamic website technology (such as PHP, ASP, JSP, etc.) can be called a dynamic web page.

jQuery's ten-year throne

In January 2006, the first version of jQuery was released to 2016. It has an unbreakable position and has accumulated a large number of plug-in libraries. It has been dismissed since 2016 because the dom operation is business-independent logic and should not appear in the business. In the code.

The rise of the web front end

SPA is a sign of the emergence of the front end to be completely independent. I remember that I used angularJs for development for the first time in 2016, and completely separated from the development of J2EE.
The front-end frameworks of SPA include angular, react, and vue, all of which have front-end routing are SPA frameworks.

SPA: The full name is Single Page Application, single page application. It is the inevitable product of the continuous improvement of Web interactivity that we mentioned earlier.

Front-end routing: Before the dynamic web page, the interface is returned by the back-end interface, and the back-end determines the interface jump. After the front-end and the back-end are separated, the interface jump is managed by the front-end, and there is a concept of front-end routing.

J2EE: The full name is Java 2 Platform Enterprise Edition. Java was launched by Sun in 1995. At that time, its main purpose was to make Applets that generate dynamic web pages.

The fate of practitioners

Most of the developers of static web pages are transforming into UI design and product positions, and the other part is still working in the front end. Those who cannot accept this change can only be severely crushed by the wheels of history.

Most of the developers of dynamic webpages unknowingly switched to pure back-end development. A small group of people (including me) decided to join this nascent industry after the prosperous rise of the web front-end, which is also the current web front-end industry. The main force of Web front-end interactivity makes the front-end pay more and more attention to logical thinking, so we have a great advantage.

Then I entered the workplace in 2016 and chose front-end development partners. During the interview, they did not ask the source code of jQuery to read through it several times, but began to ask about design patterns and explain your understanding of MVVM.

Front-end development

The attentive friends found that we are not calling the web front-end here, but directly calling the front-end. This is mainly because the relationship between node.js and our front-end is inseparable.

• Node.js acts as a server during the development process, enabling front-end projects to run as independent projects.
• The project is packaged and compiled, pathon and scss are used when compiling less, and the code is compressed and confused
• Node.js-based build tool task flow tool grunt gulp, module packaging tool webpack
• Node.js also occasionally acts as a background service Express

From 2016 to 2018, in the initial stage of front-end development, code compression, file merging, and file version change
all require our front-end classmates to study and use them themselves: grunt, gulp, webpack and other tools are used to complete it, which consumes a lot of energy.

Management of third-party dependent libraries:

1. Just started downloading the source file and putting it in our project, adding a lot of script tags to the web page. This not only makes the web page bloated and difficult to maintain, but also generates a large number of HTTP requests, which slows down the display speed and affects the user experience.
2. Then in order to solve this problem, the front-end module manager came into being. It can easily manage the dependencies of various JavaScript scripts and automatically load each module.
3. RequireJS is the first and most famous front-end module manager and one of the best implementers of AMD specifications.
4. Sea.js, which solves the problems caused by cumbersome file dependencies, is mainly to achieve asynchronous loading of JS files and manage dependencies between modules. In the world of SeaJS, a file is a module, and all modules follow CMD specification
5. Bower: It is a package management tool launched by twitter:
   based on the modular idea of ​​nodejs,
   the functions are distributed to each module,
   so that there is a connection between modules and modules, and the connection between modules is
   managed through Bower.
   Bower's main role is
   to Module installation, upgrade and deletion
   Provide a unified and maintainable management mode
6. Browserify itself is not a module manager. It
   just allows the server-side CommonJS format modules
   to run on the browser side.
   This also means that through it
   we can use the Node.js npm module manager.
   In fact, it is equivalent to indirectly providing the browser with npm. Function
   It analyzes
   the code, sorts out all the module dependencies in the code,
   and then packs the related module codes together.
   7. Component is a module manager developed by the author of the Express framework. It is a variety of resources needed for web pages. Compiled including scripts, style sheets, pictures, fonts, etc., and put them in the same directory.
   8. Duo is developed on the basis of Component. The syntax and configuration files are basically common, and it draws on some features of Browserify and Go language, which is quite Powerful and easy to use

In the end, npm is the tool we have been using now. It is the package management tool of NodeJS, and the front-end package management tool is a sign of the maturity of the front-end.

Front-end maturity

The maturity and perfection of scaffolding means the gradual maturity of front-end development. The front-end tools are getting more and more complex, and the front-end framework is getting more and more complex,

1. In angularJs version 1.0, many people liked to study its source code, and there were many enthusiastic fans. They used angularJs to develop a complete cross-platform app, and even used angularJs to build a mobile operating system (I was fortunate enough to participate).
2. Later, Angular was launched by Microsoft’s TypeScript Team and Google’s Angular Team in Angular 2 (2016). At the same time, the Angular framework was matched with standard scaffolding, which may be the earliest standard scaffolding.
3. Angular2's engineering, modularization, and scaffolding can directly build a standard initialization template project, with complete unit testing and e2e (interface integration testing), scss (css precompiled language), assets (unified management of static resources). Standard: definition of routing, pipeline, module, component, service, instruction, metadata, rx.js stream processing library, encapsulated animation, developed using typescript.
4. Most of the domestic sources of angular2 are too difficult to understand, and almost no one can fully understand them, and the concepts and related tools are huge. In the pursuit of the source code, most of them chose vue.js.
5. The source code of vue.js can be understood by most people. It is small in size and highly controllable. The maintenance of old projects can also be used alone. Angular2 is built independently and is too closely related to node.js to be suitable for maintenance in old projects. Used in. Vue.js successfully occupied most of the domestic market. (Personally, I feel that vue is like a simplified version of angular in terms of use)
6. react.js is a project of facebook, which has become the other unicorn of the front end with the pursuit of extreme performance and cross-platform.

Knowledge points

javascript series

• es5+ basic grammar
• jQuery
• angular
• react
• view
• rx.js

C3 series

H5 series

UI foot

• ant Desgin

other

• JSON
• jsonschema
• Structure
• iconfront

Technical point

• SEO search optimization, TKD caused by SPA, the search engine can’t catch the problem
• js and css browser compatibility issues
• Problems with streaming
• websocket long connection to mqtt
• Static resource optimization CDN
• The latest WebAssembly bytecode technology in the browser?

Algorithm & data cleaning

Depth traversal & breadth traversal

Summary of complex scenarios

To-do list display