Grasp the history of front-end development

foreword

When you come into contact with a new thing, you should first understand its history.

The origin, architecture and changes of front-end development

Origin of front end

It all started from a statement made by Timothy John Berners-Lee in 1989: in just a dozen pages, he proposed the idea of a "World Wide Web" -- the world's computers connected to each other. This is the origin of the Web. Before he made this statement, he had already done some related work: he created a project based on a hypertext system, a prototype system for researchers to share and update information, called ENQUIRE. In March 1989, he wrote down his initial vision and in 1990 redeveloped the configuration system. He used similar concepts to the ENQUIRE system to create the World Wide Web, for which he designed and built the first web browser, his software also served as an editor (called WorldWideWeb, which ran on the NeXTSTEP operating system), and he also Designed the world's first web server, CERN httpd (short for Hypertext Transfer Protocol Daemon).

Architecture

From his conception and practice, we found that the architecture of the web page is like this at the beginning: HTML is the content, http is the transmission tool, and URL is the accessible address of the content, css and JavaScript did not exist at the beginning. On the other hand, the architecture of the Web is very clear: Web pages and servers are connected through a computer network.

change

The evolution of the front end looks very interesting.

Since the emergence of the Web in 1989, there has actually been no independent front-end development position, and most of them are part-time back-end developers or designers. No matter the appearance of css and javascript has not changed this status quo, the web page is still stupid, every change needs to be synchronized to the backend, and then the backend returns a complete web page before we can update the web page.

Until the birth of a technology Ajax. Although IE implemented the XMLHttpRequest technology by itself in 2000, it was correctly used and accepted by the public when Google launched Gmail and Gmap. The emergence of Ajax marks that the front end has gained more autonomy, the front end can do more work, and the concept of "web application" was first proposed. During this period, some classic libraries such as jQuery appeared.

The most recent change was caused by Apple-they released the iPhone, which greatly enhanced the concept of user experience. At this time, the front-end job responsibilities were also increased, and independent "front-end development positions" began to appear. With the emergence of nodejs based on the V8 engine, the front-end tools are more abundant, and some concepts such as modularization and engineering of the front-end and back-end have also begun to be introduced into the front-end. At this time, some tools and frameworks became popular, such as webpack, react, vue, etc.

Front-end work area

browser

As the initial web browsing tool, the browser is also the birth environment of JavaScript, and it is also the tool we use every day. Most of us use the browser to access the places we want to go. And the current browser is no longer the era when "a hundred flowers bloomed" forced people to engage in compatibility and crazy. From the perspective of the core, there are only three browsers (I really don't know about domestic browsers): Chromium- - Chrome, Opera, edge, Gecko--Firefox, Webkit-Safari. The proportion of chromium has reached 69% (2021), which is a practical monopoly. (And Safari is difficult to shake in Apple's ecology)

server

Front-end development on the server? This sentence seems ridiculous, but with the advent of nodejs, this sentence is no longer ridiculous. With the development of the nodejs ecosystem, the npm package management tool has become the largest package management tool in the world, with more than 1.3 million packages managed by npm. The classic nodejs server frameworks include express, koa, etc. Their emergence makes it possible to be competent for front-end and back-end development by only learning JavaScript, making the concept of "full-stack development" further practice.

When nodejs appeared ten years ago, its author Ryan Dahl recalled that he had "ten mistakes" when designing node, and proposed that node's twin brother deno, a brand-new Rust language development, made up for regrets and deserved attention.

terminal, cross terminal

Terminals, generally speaking, are Terminal cli tools, such as vue cli, create-react-app, etc. This is also the direction that front-end development can choose. As for the cross-end, for the desktop, there are two more popular frameworks, electron and NW.js, as development tools, and for the mobile, there are react-native, flutter, etc.

Front-end business scenarios

TO B(business)

The b-end is generally oriented to enterprises, institutions, banks, governments, etc. Such business scenarios are generally to build platforms, build websites, and provide services. When users use this platform, they can purchase, use, monitor, and manage their services. This kind of business will have a lot of business logic to write, and the requirements for credibility are relatively high. This kind of business is very profitable.

TO C(customer)

The c-end is generally aimed at ordinary people, or focuses on people's basic living habits, eating, drinking, and hobbies. It is more trendy and fashionable, which greatly improves the status of user experience. Such business scenarios are flourishing. But the core is user experience, and companies doing this are generally younger (probably) and more people-oriented.

TO D(developer)

The d-end is for our programmers, self-produced and self-sold. Generally, it is to solve the development pain points, and then come up with solutions by yourself, open source for the community, and gain fame and fortune to continue the operation, a typical example: You Yuxi. Such requirements are relatively high, but the basic salary and subsequent development ceiling in the industry are extremely high.

Front-end languages and frameworks

wasm

From the birth of js to the present, the only languages that can run in browsers are HTML, Css, and Js, which have lasted for more than 20 years. But at the end of 2019, the wasm specification passed community certification, and mainstream browsers have reached some consensus on wasm. It was born out of asm.js and is more open, secure and fast. Since then, modules in other languages such as c++/c can be run by browsers by compiling into wasm modules. Maybe one day, we can run large-scale games on browsers? (What about the internet speed?)

frame

When we learn a framework, there are often some problems and then we look for solutions. Inadvertently understanding this framework/tool can just solve this problem. But I suggest that when we go to learn an excellent framework, we can learn more about its author, understand the author's original intention for the design of this tool, and understand the technical vision of this person, because such people are often Those who subvert or greatly change the industry are the leaders of the industry. Below are some excellent frameworks and their authors.

Front end learning path

That's a superficial understanding of the history of front-end development. How can we learn front-end? Here I recommend a website roadmap . The following is a screenshot. The purple mark in the picture is a must master, the green mark is recommended for learning, the gray mark is when you need it and you can learn it again, and if there is no mark, you can...

From this picture we can see some basic knowledge. To learn front-end, you need to learn computer network knowledge, which is the foundation of front-end and back-end joint debugging; you need to learn the classic package of html+css+js, which is the only way for 20 years; learning version management git, because collaboration is our smooth work. Guarantee; learn a package management tool npm/yarn, (not applicable to npm should not be considered an application hh); learn a build tool webpack is a veteran team, esbuild is super fast, and vite is a new product; learning A front-end framework, react and vue are both a temporary choice. .. as the saying goes, keep learning.

Summarize

Today, I will introduce the origin of front-end, its work field, main business scenarios, development, and learning path. I hope you will gain something after reading it, and it will be helpful for you to understand the position of front-end development.

REFERENCES

more Information

Everyone knows the above information. If you are concerned about web standards, you can learn about the web standards organization.

w3c: world wide web consortium
ECMA: Ecma International
WHATWG: Web Hypertext Application Technology Working Group
IETF: Internet Engineering Task Force

Want to learn more from the tech giants? Where are the problems encountered in development discussed? How to obtain the massive resources of financial technology?

Hang Seng LIGHT Cloud Community, a professional financial technology community platform built by Hang Seng Electronics, shares practical technical dry goods, resource data, financial technology industry trends, and embraces all financial developers.

Scan the QR code of the applet below to join us!