The front end of my eyes 🧐

This is the first day of my participation in Gwen Challenge

Personal ability is limited, most of the content is from a personal point of view, if there is a wrong statement, please correct, to avoid misleading new students

Purpose of writing this article

• In order to help those who want to learn the front end, or those who are in the preschool end, the front end freshmen to know the front end or deepen the understanding of the front end engineer
• Answer some of the questions collected personally

Tips: All FE (front-end) mentioned in this article refers to the Front End

What is front-end development

Here first quotes Baidu Encyclopedia – the introduction of front-end development

Front-end development is the process of creating Web pages or APPS and other front-end interfaces and presenting them to users. The user interface interaction of Internet products is realized through HTML, CSS, JavaScript and various technologies, frameworks and solutions derived from them

Evolved from web page production, the name has a very obvious characteristics of The Times. In the evolution of the Internet, web page production is the product of the Web1.0 era. The main content of early websites is static, mainly pictures and text, and users’ behavior of using websites is mainly browsing. With the development of Internet technology and the application of HTML5 and CSS3, modern web pages are more beautiful, interactive effect is remarkable, and more powerful.

At present, many new students and teachers of some schools still stay in the Web1.0 era of front-end development

Think FE’s job is to write web pages (pages), think there is no difficulty, easy to learn, ability is easy to reach the ceiling

In addition to a variety of online education institutions, the overwhelming course advertising for students without too much FE foundation (XX days entry front, imitation XX project, XX days entry to master) is easy to mislead new people

This is a narrow understanding

In a broad sense, there are front end engineers in all parts of the user end product that are related to vision and interaction, and the responsibilities of the front end engineer go beyond that, as described in more detail later

Refers to the terminal

• PC
• Mobile terminal: Android, IOS
• Embedded devices: Pos machine, workbench, intelligent wearable devices, etc

What is a Web Front-end Engineer

It is literally a front end student who mainly grasps Web development related technology

The technologies associated with the Web are HTML,JS, AND CSS

From this we associate with is to do web site page development

Web front End engineer and front end engineer in most cases refer to the same position

Is the job just to write pages

The days of the front-end just writing web pages are long gone

As mentioned earlier, all visual and interaction-related work in the end product requires the involvement of the front end engineer

As the hardware on the end gets better and better, users want more and more functionality

Front-end work directly affects user experience. PM (product manager) also puts forward more requirements on user experience in order to improve users’ stickiness to the product, which cannot be solved by simply writing pages

In order to enrich the user experience, it is necessary to enrich the page interaction, animation, and enhance user stickiness is to use the game on the end

Such as:

Interactive animations and data reports in the annual report (annual bill of Alipay) involve data visualization, complex interactive animations and other technologies, built-in in mainstream apps, orchard games, tree planting games, taobao games on The annual Double Eleven, etc., all of which require front-end engineers

Fast developing front end

Master HTML,JS and CSS in the Web1.0 era

But modern Web development emphasizes engineering, the content that needs to master is far more than this, especially JS is now the pillar of the front end

Hence the famous saying:

Any application that can be written in JavaScript will eventually be written in JavaScript

What can we do

There’s a lot more front-end engineers can do than just plain page writing…

For ordinary users

• PC: PC web page, desktop application
• Mobile terminal: H5 application, mobile App, small program
• Interactive interaction
  • Games: Such as Alipay (Ant Manor, Ant Forest), Taobao (annual Double 11 game activity page), orchard games in various apps, and interactive games commonly seen in the activity page
  • Animation: Some interesting animation that the user sees
  • Interaction: Interactive animation between component/page dimensions
• Data visualization: Charts of data that are common to users

For developers

• engineering
  • Process specification tool
  • Measurement monitoring system: log collection, error reporting, page monitoring, data analysis, watermark service, etc
  • Build tools: Customize based on existing build tools
  • Development framework: a customized framework based on existing open source frameworks for specific business scenarios
  • CLI: scaffolding tool
  • Components: UI components, business components, graphics components
  • Testing: UI automated testing tool
  • CI/CD: Continuous integration and continuous delivery platform building, cloud building platform
• Performance optimization
• Node.js
  • The Node middleware
  • Server-side development framework
  • Various automation tools
• Cross-end technology: a set of code, multi-end reuse framework
  • Small program cross – end: wechat, QQ, Alipay, Baidu, Bytedance, kuaiapp and other small programs
  • Mobile cross-terminal: IOS,Android
  • Cross-pc: Windows, Linux, and MacOS
• Visualization techniques: Transform data into interactive graphics or images
  • Data report
  • Geographic information visualization
  • A data graph
• Build a service platform: Create a complete page technology by dragging and dropping with a small amount of configuration
• Intelligent platform: through AI machine learning, the page code can be generated directly from the original design, and the high quality of the code can be guaranteed

How to become a Qualified Junior FE

Personal view

1. Basic knowledge of HTML and CSS

• Can complete the restoration of UI design draft
• Can complete some simple interactive animation

2. Solid JS foundation

Js is the most written content in FE, and many framework technologies and tools are also written by JS, that is, they are ultimately inseparable from JS

• Familiar with ES5,ES6 syntax
• Understand BOM/DOM apis: At least understand what capabilities these apis provide, not necessarily how to use them
• Familiar with a modern Web framework (Vue,React,Angular) and some of its core principles

3. Engineering ability

• Know how to use build tools
• Know how to debug your application

4. Project capability

• Ability to deploy your own Web applications
• You can use a database
• Have certain capability of server development

other

• Be able to keep learning
• Not averse to new technology

conclusion

The front end is growing rapidly and the future looks promising

As hardware technology evolves and more application scenarios emerge, FE is a challenging job

The industry is short of engineers, not UI reducers

QA

1. The main work of the front-end, as well as the advantages and disadvantages of the front-end

The main tasks of front-end engineers have been described in detail above

Benefits, EMMM, in my opinion

• The work is definitely challenging, can tap their potential, let me continue to learn and progress
• As enterprises have opened up online sites, is very short of front-end engineers, that is, good employment
• Technical products are the closest to the user, can get a great sense of achievement

Disadvantages, LET me say a few objectively

• Technology updates quickly and requires constant learning
• There are many kinds of technology, easy to discourage just a little, no one to guide the direction of beginners
• Prone to treading water

2. How to get into the front end and the stages of front end learning (learning steps)

Stage 1: Page restoration

1. Familiar with CSS, BASIC SYNTAX of HTML, familiar with the writing of common attributes
2. Achieve 1:1 static restoration of common pages (without complex animations and interactions)

Learning Materials:

• Novice tutorialI always thought it was a good primer
  • HTML section content
  • Content of CSS

The learning process is mainly to understand the ability, rather than trying to remember how to spell xx attributes

Once you have a general understanding of the basic capabilities, try looking at a few comprehensive cases of implementation

• Simple page
• Go to theLearning websiteTake a complicated case and follow it through
  • I picked a random case here

When watching video learning, when encountering material problems, can not be exactly the same as the tutorial, our purpose is to learn this process, in the implementation can have their own thinking, material can be replaced according to their preferences or blank

Stage 2: Enliven the page

1. Understand the basic usage of JS, can be simple to control the page

Learning Materials:

• JavaScript tutorial
• Js Dom
• Net, JavaScript
• Modern JavaScript Tutorial

Materials are always used as learning AIDS, and you have to decide which chapters to choose during the initial learning process, rather than studying next to the table of contents

After understanding the basic grammar, you can go to the learning website to find a comprehensive case combining JS

When you can complete your page ideas by looking them up, you’re almost there

Stage 3: Strike while the iron is hot

1. After you’ve learned how to use the traditional “Three Musketeers” to develop your pages, you can then experiment with the modern development framework

For students with weak JS foundation, vue. JS is recommended to get started. If you think your JS is good, consider react.js

These two are THE FRAMEWORK of JS, js in essence, that is, a tool with complete engineering development ability composed of JS basic capabilities

• Vue
• React

If you are not used to reading official documents, you can find other learning materials on the Internet by yourself. I believe you have your own set of methods to search for information at this time

But eventually I’ll come back to the learning document

Stage four: Getting back to basics

• At this point you should be able to develop a normal project/page

At this point, I need to systematically make up for my basic ability (JS is the main,CSS is the secondary). I believe that secondary learning will have a great harvest, and some Epiphany will occur in the process

javascript:

• ES5
• ES6

css:

• New capabilities for CSS3
• Flexible layout: Flex
• Fence layout: Grid
• Responsive layout

Stage 5: Endless exploration

At this point, you already have some practical experience and have a solid foundation of knowledge:

Explore what interests you in the development techniques listed below

Or, not content with static web pages, learn some back-end technology (the lowest cost node.js-based back-end capabilities)

It is best to explore the road behind yourself, to find the direction you are interested in, first breadth, and then in-depth exploration

3. Is there anything to pay attention to in front end learning

1. Take basic content seriously, especially JS, of meeting is not much, depend on essence
2. Don’t be so quick and complacent that you can just write a page, finish a school project, and get a job
3. Not arrogant and impetuous, down-to-earth learning

4. School recruitment – learning the way to enter the big factory

Understanding: Heard of this concept, know what it is

Familiarity: Can quickly build a usable application using this technology

Proficient: read source code, understand its principles, can modify it to meet some special needs

• Solid front-end technology
  • Proficient in JS, CSS, HTML
  • Have some actual combat project development experience
  • Have some understanding of the principle of framework (Vue/React), can reproduce or clearly describe
  • Have own understanding and practical experience of front-end engineering
  • Some additional development capabilities (ability to describe clearly how the technology works)
    • Xx plug-in
    • Small program
    • A desktop application
    • Mobile App
    • Cross-end development techniques
    • .
• Solid computer knowledge (Do not despise)
  • The operating system
  • Algorithms and data structures
  • Computer network
  • Design patterns
• Plus (I think)
  • Have some back-end development capability
    • Experience in server development
    • The database
  • Development of multi-person collaborative projects
  • Be familiar with the Git
  • Understand the basic usage of Linux
  • Deploy your own front-end engineering
  • My own personal blog
  • Internship experience

The college Entrance Examination is also summarized here

5. Front-end learning how to make a project quickly (learn what)

Hoping for quick results:

You know HTML, you know how CSS works and you know how to write, you can develop a simple page just by looking at the materials, right

If you want to enrich your page interaction and understand the simple syntax of JS, check out the BOM and DOM APIS as you see fit

Be able to pull off your own project by reading up and writing code (knowing what each line means)

Subsequent rapid development (JS foundation weak) can learn the Vue framework (🍬) have the time, a week after watching a practice course is not a problem, will certainly encounter in the process of many don’t understand something, right now you need to write down, down to check information, then the digestion and absorption, about 1 to 2 months of actual combat tutorial, to the use of portal frame, They can achieve what they want more quickly

The next step is to step back and take a closer look at JS

6. What do I need to learn to make a desktop applet or wechat applet besides three pieces

Small program manufacturers constrained the development of norms, emasculated some of the “three musketeers” ability, the actual development or use of these three, just change some concepts

That is, learning costs only: familiarity with a specific vendor’s development specification documentation, and the use of development tools (ides)

If you do not know how to start, do not understand the document, it is recommended to find a small program of actual combat course

If you want to develop a small application that can run on multiple platforms at the same time, it is recommended to learn a cross-end development framework, as described below

For desktop applications, it is recommended to learn the Electron framework, which uses the same technology as the Three Swordsmen, but needs to follow the framework development specifications

7. In addition to the necessary front-end knowledge, what knowledge is needed to enter dACHeng? Do you need something like a backend, a database

• Basic computer knowledge
• Have certain actual combat project experience
• Git
• About back-end technology
  • You don’t have to, but you don’t have to. That’s your advantage, and I’m sure you’re not content to just write static pages
  • Database: Non-relational database, relational database will use one

8. What do I need to prepare for entering the factory, such as projects or awards? Is it necessary

• The project isDefinitely needed
  • In the resume screening process, in addition to the basic information about the school and your ability, you are judged by the project on your resume, if there is no project on your resume, then what is left on your resume?
• Award: Not required
  • ACM such well-known algorithm competition awards are the most valuable, other program design competition or project competition awards I think at least need to save one or more

9. About the current status of development framework

• Ever popular: JQuery,UI libraries (Bootstrap,Layui), Requirejs (modular solution)
• Now: Component-based development, Vue, React, Angular, Svelte

10. What are the technologies related to front-end development

• Platform specific
  • Desktop application: Electron, nw.js
  • Cross-end development: Native, React Native, Cordova, Weex, Uni-App, Rax (Ali), Taro (JD), Chameleon (Didi), Hippy (Tencent) — a hundred flowers bloom
    • One side of development multiplex: code reuse
    • End point: Web,ios,Android, applets, etc
  • Web: Vue, React, Angular, Selvte
• Type support: TypeScript, Flow
• Build tools: Webpack, Gulp, Grunt, Vite, Rollup, Snowpack
• Node.js -> Express,koa, Egg, etc
• CSS precompiled: SASS, Less, Stylus
• . Endless..

The above is just a list of some front-end technologies, not a comprehensive one, to illustrate the flourishing ecology of the front-end. The following is a relatively detailed list

Front end related development technology list

1. Web development

Development framework

• Vue
• React
• Angular

The UI component library

• Vue: ElementUI,iView,Cube UI, Vant, Vuetify, Ant Design
• React: Ant Design, MATERIAL-UI,Chakra UI

2. Cross-end development

A set of code, multiplex

A desktop application

• Electron
• Flutter
• NW.js

A mobile application

Name of the framework	IOS	Android	Small program	Web
React Native	✅	✅	❌	✅
Cordova	✅	✅	❌	✅
uni-app	✅	✅	✅	✅
Weex	✅	✅	❌	❌
Rax	❌	❌	✅	✅
Taro	✅	✅	✅	✅
Chameleon	❌	❌	✅	✅
Hippy	✅	✅	❌	✅
Flutter	✅	✅	❌	✅

3. Game engines

• Egret – Egret engine
• LayaAir
• phaser
• Hilo

4. Server development -Node.js

• Express
• koa
• Nest
• egg

5. Data visualization

• Related technologies: SVG,Web GL,Canvas
• Visual library: echarts antv, Chart, js, VICTORY…

6. Build tools

• Webpack
• Glup
• Grunt
• Vite
• Rollup

7. Use tools in engineering

• Babel
• Eslint

8. Measurement monitoring

• frontjs
• fundebug
• Baidu statistics
• Google Analytics
• CNZZ

Intelligent 9.

• imgcook
• pipcook
• TensorFlow.js

other

• TypeScript
• .