MindMap Gallery Eighteen years of front-end technology
The content summary of Toutiao's long video "Eighteen Years of Front-end Technology" provides an understanding of the historical context of the development of front-end technology. Full of useful information~ Welcome to like and collect!
Edited at 2024-03-05 15:16:09This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
Eighteen years of front-end technology
Before 2006
technology trends
Current status of front-end
Static pages
Chetuzai
Art
Backend-led web development
Front-end technology
Dreamweaver
template
2006
technology trends
Current status of front-end
The front end is responsible for part of the page interaction processing tasks
Assist the backend
Backend-led web development
Front-end technology
DIV
JQuery
Encapsulating JS
Process HTML
handle events
Create animation
AJAX
CSS
Sass
Function
variable
Nested rules
Mixed inheritance
function
preprocessor
Compiler converted to CSS
Backend technology
JSP
PHP
"The best language for the Web"
Ruby
.Net
2009
technology trends
The sprout of front-end engineering
Front-end technology
ES5 released
unified standards
Add method attributes
Node.js appears
Based on Chrome V8 engine
Use JS to write server-side programs
Non-blocking I/O model
Handle concurrency efficiently
Spontaneous emergence of norms
CommonJS(Node.js)
AMD(RequireJS)
CMD(SeaJS)
Less
Inspired by Sass
2010
technology trends
Mobile apps emerge
Responsive Web Design
Separation of front and back ends
Static pages
Page routing
interaction logic
Front-end engineering
Spontaneous private efforts
Complete engineering
Front-end products
AngularJS
Innovative Technology
Two-way data binding
dependency injection
Modular
historical role
Revolutionary changes in web development
Lay the foundation for the SPA framework
evaluate
meritocratic framework
Design front-end framework with back-end thinking
MVC thought
Steep learning curve
Not very popular
Backend products
Express
Innovative Technology
Node.js backend framework
Web application
API
historical role
Developing back-end applications with Node.js becomes popular
NPM
Innovative Technology
Node.js package management tool
Install
shared
manage
historical role
Powerful open source community ecosystem
2011
technology trends
The front-end UI framework appears
Front-end products
Bootstrap
UI responsive framework
Gongge responsive concept
Pre-made rich styles and components
Front-end UI framework precursor
2012
technology trends
Front-end large-scale project development becomes possible
Front-end products
TypeScript
Enable JS-type project development
Webpack
Module packaging tool
Grunt
Module packaging tool
2013
technology trends
Front-end development component direction
Front-end products
React
use
Build SPA interactive interface
Virtual DOM
components
One-way data flow
JSX syntax
significance
Changing the way front-end development works
Componentization
high performance
high efficiency
Gulp
Build tools
Koa
The next generation of ExpressJS
Purpose
Solving ExpressJS shortcomings
advantage
Asynchronous programming
Code clarity
Flexible application
Cross-platform products
Electron
Technical composition
Chromium
Node.js
use
Cross-platform desktop application development framework
Build native desktop applications using web technologies
2014
technology trends
The front-end has entered the HTML5 CSS3 era
Front-end products
Vue
Technical features
Advantages of Angular
React advantages
Active community
HTML5 standard
Technical features
meet needs
interactivity
multimedia
performance
new features
Semantic elements
form control
graphics
multimedia elements
Web API
CSS3
Technical features
new features
rounded corners
shadow
Gradient
animation
transition
Flexible layout
Milestones of the times
HTML5
CSS3
2015
technology trends
Increasingly powerful and perfect, reaching out to every land on the Internet
JS is no longer a script but a language
Front-end developers are called real engineers
Front-end products
ES6 standard
Technical features
JS syntax improvements
kind
inherit
Promise
Modular standards
React Native
Technical features
Based on React framework
JS syntax
React syntax
native mobile app
Cross-platform
iOS
Android
GraphQL
Technical features
API Query Language
Get multiple resources with one request
self-describing
2016
technology trends
Various lightweight frameworks emerge
Development is efficient and convenient
Front-end products
Webpack
Technical features
Support ES Module
Mainstream module packaging tools
Next.js
Technical features
Based on React lightweight framework
Server-side rendering
static export
better performance
SEO support
Nuxt.js
Technical features
Lightweight framework based on Vue
Copy the functionality of Next.js
Svelte
Technical features
Modern front-end framework
Not using VDOM
2017
technology trends
VDOM
CSS atomization
Lay the foundation for developing large-scale applications with JS
Front-end products
Tailwind CSS
Technical features
atomization
Default components of Next.js framework
Sass/Less has completed its historical mission
Flutter
Technical features
Cross-platform mobile application framework
iOS
Android
Web
Desktop
Backend products
Nest.js
Technical features
SourceAngular framework
Modular
dependency injection
Decorator
Build server-side applications
Frameworks in the Node.js ecosystem
Support TS to develop large-scale applications
2018
technology trends
The rise of mini programs
The rise of cross-end development
Front-end products
Applets
WeChat applet
DingTalk Mini Program
Taobao mini program
Feishu Mini Program
Cross-platform products
UniApp
Technical features
Cross-platform application development framework
iOS
Android
H5
Mini programs for each platform
Based on Vue
Taro
Technical features
Based on React
Cross-platform application development
Copy UniApp
2019
technology trends
Rapid development of small programs
2020
technology trends
Technology and ecology have matured
Front-end products
Vue 3
Technical features
Combination development model
TS support
Composition API
Vite
Technical features
Front-end build tools
Hot module update
Compile on demand
Filling Webpack performance bottlenecks
2021
technology trends
A richer ecosystem
Front-end products
SvelteKit
Technical features
Corresponds to Next.js
Corresponds to Nuxt.js
Enriching the Svelte ecosystem
2022
technology trends
Huawei Hongmeng development uses front-end language
Cross-end products
ArkTS
Technical features
Hongmeng APP development
Based on TS extension
2023
technology trends
drive in reverse
Front-end products
Server Actions
Technical features
Belongs to Next.js 14
Write server-side code in the component
Jokingly called Next.php
2024
technology trends
Penetrate into various fields
Speculation fades
calm development
Front-end products
"Front-end is dead"
"Front-end immortality"