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:
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, 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.
Front-end engineers
First, the basic language
HTML-related
- HTML standard, follow-up for the latest HTML standard update.
- HTML tags semantic nested standards.
- Accessibility.
Learning objectives: to re-sort the tabs relationship. International, future web page structure, in line with accessibility standards.
CSS-related
- CSS standard, CSS standards to follow for the latest updates.
- CSS property, the latest attributes.
- CSS programming, Houdini.
- Web Fonts
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.
JavaScript-related
- ECMAScript standard, such as the latest proposal, the browser DOM, BOM.
Learning objectives: familiar with JavaScript foundation API, parameter clear. JavaScript language abreast of the latest trends.
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.
TypeScript(TS)
- TS fire into future development trend.
- TypeScript use. The difference between the JavaScript API
Learning Objectives: Familiar with TypeScript.
AssemblyScript(AS)
- 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 Objectives: Learn basic grammar, AssemblyScript files can be compiled into .wasm format. With it, you can not go to review C / C ++ a.
Dart
- Flutter continued hot, Dart as a basis for development, should grasp
- Dart syntax of JavaScript and understand the difference.
Learning Objectives: Familiar with Dart language.
Markdown
- Syntax to use.
- Writing articles, writing documentation necessary
Learning Objectives: skilled use Markdown to write articles, and other project documentation.
Shell Script
- Grammar, commonly used functions
Learning Objectives: You can use shell write the more common procedures.
SQL language
- Common syntax, functions
Learning Objectives: can write sql statement CARD common queries.
Second, basic computer
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.
computer network
- HTTP protocol, TCP protocol, UDP protocol
- HTTPS，HTTP2
- DNS
- WebSocket
Learning objectives: to master and understand the principles of these network protocols, it can be used to practice.
Computer composition principle
- Ary
- Unicode, ASCII, UTF-8 encoding, etc.
- Computers Work
Learning Objectives: to understand their partner, to understand the "cloud" hosting, web hosting foundation.
operating system
- 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.
Third, Advanced
Engineering
- webpack
- rollup
- 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
- postcss postprocessor
- Principle and Implementation uglify
- Multiplayer git collaborative process
- gitlab to build and use
- CI / CD
- git hooks, husky,commitlint
- Document output, StoryBook, gitDoc, gitbook etc.
- NPM, formulas
- yarn
- 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
- Data mock
Learning Objectives: can quickly build up from scratch 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.
Componentization
- View
- React
- WebComponents
- 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.
Node.js development of Web-based services
- also
- express
- pm2
- RESTFul style
- Process Management
- Data persistence MongoDB, mysql, etc.
- Redis data cache, etc.
- Long Link Service
- SSR
- Docker
- Nginx configuration, openresty
- Cloud hosting, shared hosting, etc.
Learning objectives: complete the build and deploy Web services independent.
CLI-based Node.js development
- 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.
Desktop Application Development
- Electron
- NW.JS
Learning objectives: understanding the development of JavaScript-based desktop applications, when necessary, can quickly locate this technical solution.
Mobile Application Development
- Flutter art and related derivatives
- React Native art and related derivatives
- WEIGHT
- WEEX
Learning Objectives: to understand and master. Flutter can be used to develop a mobile RN or APP. Learn PWA.
Third-party platform
- Small micro-channel program
- Alipay applet
- Baidu applet
- Fast Application
- wepy
- mpvue
- taro
- …
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.
Plug-in Development
- chrome plugin API
- DevTool extension
- VSCode and other IDE Plug-in Development
Learning Objectives: Learn what plug-ins can be done, when necessary, can quickly locate this scheme.
Browser works
- Layout engine, browser rendering principle
- Script interpreter engine, the script runs principle, v8
- headless headless browser, puppeteer
Learning objectives: to master the browser works, can be applied to automated testing and performance optimization.
Performance Optimization
- RAIL model
- 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: understanding the performance optimization tools, write excellent performance of Web applications.
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 Objectives: Learn about common Web browser attacks, to avoid a security risk to write website.
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.
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.
Visualization
- Advanced canvas
- Advanced svg
- WebGL foundation
- Computer Graphics
- 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.
SEO
- Search engine crawlers principle
- Search engine algorithm weights
- SEO web page associated with the tag
Learning objectives: 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 (not to spend PPC yo).
Development and debugging
- Explorer script debugging
- Node.js debugging
- Chrome Dev Tools Advanced use (environmental simulation, rendering performance, memory usage, debugging endpoints, packet capture, console built-in functions, and so on)
- HERE
- 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.
UI Hyogo
- UX base
- 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.
WebAssembly
- principle
- Advantage
- Simple application development
Learning objectives: understanding the development process WebAssembly byte code, understand its operation mode in the browser, when necessary, can quickly locate this program.
WebRTC
- Real-time communication solutions
- It is simple to understand and develop
Learning Objectives: to understand and follow WebRTC technology, understand the standards, implementation principle, when necessary, can quickly locate this program.
WebXR
- JavaScript developers VR and AR
- 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.
WebAuthn
- 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.
This article published on "a schoolboy's blog", please indicate the source.
The End.