To work more than three years, most recently business is not very busy, but my heart is empty. The company recently participated in a UI library development, find themselves do not know too many things. This opportunity it:
1. knowledge necessary to experience the last two years down a little bit, one by one confirmed with the standards and documents, you may say.
2. The tool will be used not only with the good, but also to understand the principle.
3. Even some knowledge of being less than, as a little pursuit of engineers, should do some advance knowledge reserves.
Writes shocked to find myself here two or three years in technical or grew, and in 2016 I looked at the need to share predecessors, everyone said I was useful to school, listen to the older generation always right, 2019 I can according to their own summed up the experience and understanding of how to learn the system, and the heart has its own priorities bottom.
Now go back to the title, what front-end engineers should learn? I wrote an outline, but inside the goal is to learn to say to yourself, issue first, in order to share with you, learn together; the second is that you help me see that nothing is missing under.
My self-positioning did not identify the front end of the field is too broad, which in the end point of the most suitable and worthy of further study? I do not know. But the first full school again, you may say overall correct.
I feel still, still, I will always be a front-end students.
This article does not discouraging results, please rest assured to read. If you are a fresh graduate, pinpoint their location, take your time.
First, the basic language
HTML standard, follow-up for the latest HTML standard update.
HTML tags semantic nested standards.
Learning objectives: to re-sort the tabs relationship. International, future web page structure, in line with accessibility standards.
- Web Fonts
CSS standard, CSS standards to follow for the latest updates.
CSS property, the latest attributes.
CSS programming, Houdini.
Learning objectives: to sort out the relationship between the css properties, more features try to use css to achieve. Master concerned about the latest development of css.
ECMAScript standard, such as the latest proposal, the browser DOM, BOM.
4. Node.js related
Node.js global API, the native module, Node.js learn about the latest trends.
Learning objectives: familiar with the role and use native API of Node.js basis. Lay the foundation for learning services side development.
TS fire into future development trend.
Learning Objectives: Familiar with TypeScript.
In addition to c \ c ++, Rust, Kotlin, Golang and other high-level languages can be translated into WebAssembly byte code, but a new language can be AS. AS is a strict subset of TS can learn together lay the foundation for WebAssembly development.
AssemblyScript grammar and usage
Learning Objective: Learn basic grammar, AssemblyScript files can be compiled into .wasm format. With it, you can not go to review C / C ++ a.
Flutter continued hot, Dart as a basis for development, should grasp
Learning Objectives: Familiar with Dart language.
Syntax to use.
Writing articles, writing documentation necessary
Learning Objectives: proficient use Markdown to write articles, and other project documentation.
9. Shell Scripts
Grammar, commonly used functions
Learning Objectives: You can use the shell to write more common procedures.
10. SQL language
Common syntax, functions
Learning Objectives: You can write sql statement CARD common queries.
Second, basic computer
1. Data Structures and Algorithms
Ideas classical algorithm
Common data structures
Learning Objectives: mastering classical arithmetic thought to apply to the business code in the past, will choose the best data structure in an appropriate scene.
2. Computer Network
HTTP protocol, TCP protocol, UDP protocol
Learning objectives: to master and understand the principles of these network protocols, it can be used to practice.
3. The computer composition principle
Unicode, ASCII, UTF-8 encoding, etc.
Learning Objectives: to understand their partner, to understand the “cloud” hosting, web hosting foundation.
4. Operating Systems
Computer Operating System
Linux operating system
Learning Objectives: To understand how the operating system works, you can use the linux operating system independent, master commonly used commands.
- webpack, rollup
- git hooks, husky,commitlint
- npm, lerna
babel use the principles that can be used with the latest ECMAScript syntax eleven confirmed.
Use eslint, stylelint, prettier style and grammar, etc., code review tool
unit using the test tool or library
sass programming syntax
Principle and Implementation uglify
Multiplayer git collaborative process
gitlab to build and use
Document output, StoryBook, gitDoc, gitbook etc.
markdown render. Examples of markdown write can be performed online
Modular, js modular in ECMAScript and Node.js have studied here mainly refers to the css modular several ways
Learning Objectives: scratch can quickly build up a modern multiplayer collaborative front-end engineering project, select the appropriate tools to improve development efficiency, keeping team members coding style uniform, and maximize the use of tools to protect the quality of the code.
2. Components of
Browser compatibility, canIUse
Learning Objectives: Familiar with Vue, React development, component-based understanding of future trends WebComponents. Master data-driven thinking, grasp the classic two-way binding implementation principles, read the source code, in-depth understanding. The distal derived product master routing, design and implementation of data management.
3. Web-based services development of Node.js
Data persistence MongoDB, mysql, etc.
Redis data cache, etc.
Long Link Service
Nginx configuration, openresty
Cloud hosting, shared hosting, etc.
Learning objectives: complete the build and deploy Web services independent.
4. Based on the CLI development Node.js
CLI library and common development principles
CLI library of popular design, realization of ideas
Learning Objectives: can be developed independently CLI, when there is a demand, you can quickly locate this program.
5. Desktop Application Development
6. Mobile Application Development
Flutter art and related derivatives
React Native art and related derivatives
Learning Objectives: to understand and master. Flutter can be used to develop a mobile RN or APP. Learn PWA.
7. Third Party platform
Small micro-channel program
Learning objectives: to quickly get started developing any kind of small program. Learn implementations applet. Understanding of the industry to realize the idea of popular small library of program development.
8. Plug-in Development
chrome plugin API
VSCode and other IDE Plug-in Development
Learning Objectives: Learn what plug-ins can be done, when necessary, can quickly locate this scheme.
9. The browser works
Layout engine, browser rendering principle
Script interpreter engine, the script runs principle, v8
headless headless browser, puppeteer
Learning Objectives: Mastering the browser works, can be applied to automated testing and performance optimization.
10. Performance Optimization
Hardware basis: a frame, the frame rate, the display principle drawing
Progressive web page index (Progressive Web Metrics, referred to as PWM’s)
Commonly used performance optimization tool
Learning Objectives: To understand the performance optimization tools, write excellent performance of Web applications.
11. Web browser security
Browser security policy: origin policy, content security policy, sandbox
The attack: XSS, CSRF
Other: CRLF attacks, DNS hijacking and DNS poisoning, clickjacking, browser plug-in exploits, etc.
Learn about common symmetric encryption and asymmetric encryption algorithms
Learning Objective: Learn common Web browser attacks, to avoid a security risk to write website.
12. Web server security
Common attacks: directory traversal, DDOS, playback, password cracking, SQL injection
Other attacks: CC attacks, port penetration
Learning Objectives: Learn about common server attacks and principle, there are obvious loopholes to avoid write Web services.
13. Monitoring statistics
Front-end monitoring script error: error stack form, real-time monitoring implementation
Front-end performance monitoring: performance indicators, implementation
Server monitoring: hardware monitor, system monitoring, application monitoring, network monitoring, traffic analysis, log monitoring, security monitoring, API monitoring (availability, accuracy, response time), performance monitoring, service monitoring
Learning Objectives: learn how to self-build or build open source monitoring platform. Understand the meaning of some of the common monitoring indicators. Such as performance-related indicators TTLB, QPS What does it mean, what business-related indicators PV, UV, CTR, and so representative.
Common library: ECharts, D3, etc.
Learning Objectives: This is a future-oriented front-end technology. Learn about common visualization technology solutions, when there is a demand can quickly locate programs. Attention and can be used to apply the latest technology to develop cool, data visualization.
Search engine crawlers principle
Search engine algorithm weights
SEO web page associated with the tag
Learning Objectives: To understand and implement the principles of search results ranking algorithm of search engines. If external websites that can autonomously perform simple SEO, the website ranking in the search engines as high as possible.
16. development and debugging
Explorer script debugging
Chrome Dev Tools Advanced use (environmental simulation, rendering performance, memory usage, debugging endpoints, packet capture, console built-in functions, and so on)
Use to help develop plug-ins, such as spell checking and so on.
Learning Objectives: mastering using Chrome debugging tools for script development, performance optimization are of great benefit. Master debugging method Node.js services.
17. UI library
Color theory, color light primary colors, color representation page
Web page with the principles of color, color psychology
Achieve common UI components
Common use UI components and source code
Learning objectives: have a certain aesthetic and user experience attention, when there is no designers to participate, can independently design and some interactive programs, understand the meaning of common UI components represent, you can use the right components in the right needs. Identifying common UI component design and realization of ideas, independently developed UI component library.
Simple application development
Learning Objectives: To understand the development process WebAssembly byte code, understand its operation mode in the browser, when necessary, can quickly locate this program.
Real-time communication solutions
It is simple to understand and develop
Learning Objectives: Understand and follow WebRTC technology, understand the standards, implementation principle, when necessary, can quickly locate this program.
Learn WebXR API, follow up the draft process
Learning objectives: understanding and concern WebXR technology, understand the standards, implementation principle, when necessary, can quickly locate this program.
Biological authentication using a browser
Learn WebAuthn API, and simple to use
Learning objectives: understanding and concern WebAuthn technology, understand the standards, implementation principle, when necessary, can quickly locate this program.
Here are some additional thinking:
Things have been identified: the next few years, 5G comprehensive commercial, network delay and transmission rate will no longer limit the human imagination, all things Internet era of unlimited anytime touch up.
Uncertain thing: to master the technique of controlled nuclear fusion.
Imagine, even if the future did all things Internet, we can make real-time AR, VR interactive, but not if the phone battery technology development, these assumptions no doubt in castles in the air, unable to fall. We all know now the browser using WebGL degree of power and other technologies. Assuming that humans mastered controlled nuclear fusion technology, and electricity networks have become as ubiquitous and air, that is the real age of the imagination can fly.
Bold prediction about the future development trend of front-end technology: Based WebAuthn biological authentication, we get rid of the shackles password authentication; 5G transmission rate based, open application installation or use open Web access without distinction locally; based WebAssembly, traditional customers end end may migrate to the Web, and has ultra-high performance. Assuming that the phone battery technology has made considerable progress, then WebRTC, WebXR, WebGL will be widely applied. Website qualitative change, traditional web page DOM structure will be called the history class, AR, VR, immersive interactive real-time communications will replace the text and images on mobile phones only need to install a browser, you can do what you want of anything.
But the arrival of the future when I do not know yet, based on the present, look to the future, trying to learn it.
This article published on “a schoolboy’s blog”, please indicate the source.