In 2022, how to learn front-end development gracefully?

Leave a Comment / / Jeffjade | 晚晴幽草轩

Original link: https://www.jeffjade.com/2022/07/31/245-2022-how-to-learn-front-end-development-elegantly/

Front-end development history and learning methodology

Doudou’s novel “The Distant Savior” mentioned: ” If there is a way but no art, art can still be sought, and if there is art, there is no way, and it ends in art “, and he deeply agrees. The Tao is the direction, and the technique is the law; recognizing the origin of things and grasping the laws of things will help to better grasp the knowledge and skills in the future, so as to solve the needs and problems. Therefore, this sharing mainly focuses on the learning direction and how to learn. Tolstoy once said: “What a great writer, he is only writing his personal one-sidedness.” The same is true for the (technical) sharing of the school of consciousness. I hope my friends will think about it, look at it dialectically, and absorb the useful parts. That’s it.

Front-end development history and learning methodology

Remarks: This article was written on 2022/07/10 ~ 2022/07/21 [Shenzhen Futian]; it originated from internal sharing and was first published on the latest website based on Wiki.js : Front-end Different Space | Qingfeng Mingyue Pavilion .

What can front-end technology be used for?

Originally, there was no front-end, and there were many people who wrote it, so there was this front-end; but now, it may also be called: big front-end . The original intention of the front-end was originally a static web page (1991) that was only convenient for scientists to read documents and pass papers. So, what can front-end technology be used for today ? Today, after nearly 30 years of great changes, the front-end technology stack can cover more and more fields:

  1. The rise of the mobile terminal brings the mobile terminal field (Web App);
  2. Hybrid App (Hybrid App) that cooperates with the native side;
  3. Native mobile applications led by React Native and others;
  4. Native desktop applications popularized by nw.js, Electron , etc.;
  5. Click-to-use light applications brought by small programs, quick applications , etc.;
  6. Other fields such as TV, VR, IOT, visualization , human-computer interaction, etc.;
  7. Under the leadership of new technologies such as artificial intelligence and 5G, the future of the front-end can be expected…  

Front-end development, a brief history of development

  1. Wild Times: From 1991 to 1994, a static web page was born for scientists to read documents and pass papers; front-end and back-end development were integrated, and front-end code was part of back-end code: back-end received requests from browsers => send static pages => sent to the browser. (Document).
  2. Stone Age: From 1994 to 2006, from static to dynamic, 1994 can be regarded as the starting point of front-end history; Tim Berners-Lee created W3C, Håkon Wium Lie proposed CSS, and PHP, a server-side script designed for dynamic web pages, was born;
  3. Iron Age: 2006 ~ 2009, from the back end to the front end; Ajax is accepted by the public; John Resig released jQuery in 2006, mainly used to manipulate the DOM, its elegant syntax, intuitive event-driven programming thinking makes it Very easy to use, so it quickly swept the world (MVC);
  4. Industrial age: 2009 ~ From front-end to full-end; with the advent of the information age and the era of big data, the disadvantages of jQuery in a large number of data operations are reflected. It will cause the page to load when it performs a large number of operations on the DOM Slowness and other problems, at this time, front-end developers gradually feel powerless…. As a result, the front-end modularization and industrialization process (MVVM) has also been started.

Front-end development events in the past decade

  1. In 2008, Google’s V8 engine was released, opening the prelude to the end of the Microsoft IE era;
  2. In 2009, Ryan Dahl released Node.js ;
  3. In 2009, AngularJS was born;
  4. React was born in 2011;
  5. Vue.js was born in 2014;
  6. The HTML5 standard was formulated in 2014;
  7. ES6 was officially released in June 2015;
  8. In 2015, Google proposed PWA;
  9. The Mini Program was officially launched in 2017;
  10. In March 2018, Quick Apps and Alliances were born;
  11. At the end of 2018, Flutter released the first stable version;
  12. Deno will be officially released in May 2020;

Big events in the history of front-end development (browser)

  1. In 1991, the first web browser WorldWideWeb browser was released (Nexus);
  2. In 1992, NCSA developed a well-known browser: Mosaic, which can browse web pages in a window;
  3. In 1994, Netscape was established and released the first commercial browser Netscape Navigator;
  4. In 1995, Microsoft released IE against Netscape, and the first browser war broke out;
  5. In 1998, with the failure of the battle with IE, the Netscape browser became open source;
  6. In 2002, IE won the first browser war with the bundled advantages of the operating system;
  7. In 2003, Apple’s Safari browser debuted and launched its own Webkit engine;
  8. In 2004, Firefox 1.0 (formerly Mozilla, Netscape) was launched, triggering the second round of war;
  9. In 2006, after six years, Microsoft hurriedly launched IE7 to challenge the challenge, in vain;
  10. In 2008, Google brought Chrome into the war, kicking off its later domination of the country;

Additional reference links:

The State of Browsers Today

Taking people as a mirror, we can understand the gains and losses; taking history as a mirror, we can know the ups and downs . Up to now, the share of Chrome browser is about 70% (in fact, if it is calculated by v8 engine, it is much higher than this); understanding the development history of the front-end for more than 20 years can allow you to better control this Work. At least, you will understand that it is relatively happier to engage in this work now, and you no longer have to worry about compatibility with IE; the evolution of tools allows you to carry out this work more “conveniently”; the development of the times makes (大) Front-end developers are becoming more and more important, and there is no need to bear the name of “cutting figure”.

Of course, in the new era, with the replacement of the old and the new, while abandoning the compatibility with the old ones, there will also be various ” new challenges “; for example, more devices (IOT, wearable devices, VR) will be based on different Application form, running products based on the “front-end technology stack”; at present, in addition to running in the browser, WeChat applet, quick application, desktop application, wearable devices, products based on the front-end technology stack, have penetrated a lot .

Web front-end learning methodology

study method

Read more, code more, improve more; be diligent in summarizing, stay passionate & curious & focused (whatever makes perfect).

grasp the principle

  1. Improve search quotient : Compared with emotional quotient and IQ, search quotient is indispensable (Google);
  2. Focus on the basics : The front-end knowledge points are many and complex, and the update is fast. Only by consolidating the foundation can we quickly welcome new students;
  3. Keep improving : When encountering a problem, through searching, etc., you must understand it, and draw inferences from it;
  4. Twenty-eight principles : “Apply what you have learned”, you don’t have to be obsessed with mastering everything quickly, time is limited, and priorities are divided;
  5. Based on yourself : find a methodology that suits you, and systematically build your own knowledge system;
  6. Pay attention to efficiency : under the coercion of the big era: be fast enough; optimize your own workflow, mechanism, and habits;
  7. Look at the team : from the perspective of business and engineering, think about the urgent points and development needs of the front-end team;
  8. Learning and having fun : It is important to know that “the wind will never end (zhāo), and the shower will never end”, you should know how to “combine work and rest”;

Reference link

How to start learning front end?

Learning direction : From the previous history, we can learn that some intermediate products such as IE browser, DreamWeaver, jQuery, Backbone.js, etc., have completed their historical mission; and what we need to learn, in addition to basic knowledge and skills (& necessary tools), i.e. over-to-date popular technology. If you encounter products left over from history in your work, you can follow the principle of “applying what you have learned”, and then learn about it.

Learning starting point : Today’s front-end involves a lot of scenarios; the technology stacks involved are even more numerous; browsers, editors, frameworks, construction, publishing, networking, debugging, testing, modularization, optimization, Engineering, backend… and even all kinds of small programs, quick apps, etc. that have become popular in recent years, are inseparable from the same origin, all of which are expanded around the front-end three Musketeers: HTML, CSS, and JavaScript. Among them: HTML is the skeleton, CSS is the appearance, and JavaScript is the interaction.

Step by step : In many of the following courses, these three foundations are developed. Or write, or framework, or debug, or compile, or engineer. And the big homework we have to complete is also closely related to these three Musketeers. Fortunately, getting started with the front end is the easiest: use any compilation tool, create a new file (even write an index.txt), write some content and save it as index.html (or htm), open it with a browser, and you can see the simple page presented.

What do you need to learn about front-end development?

What do you need to learn about front-end development?
In the early years, in a blog post on how to write a beautiful Vue , I wrote a few sentences:

In the arena of programming, if you are a samurai who is about to go on an expedition, against the vast and endless army of needs; then you not only need a good physique, but also a skill: and this软件工程学(or plus algorithm) is like Internal skills (chakra); the各家语言​​used are like martial arts moves (dugu nine swords?); the various tools used should be like portable weapons (little li flying knife?); that belongs to oneself A set of extreme development process is Qinggong (Lingbo Microbuy?)… If this is the case, then as a developer, how many skills do you have?

Today, many years have passed, and the views expressed in it are still recognized. If the ” soft and hard skills ” that need to be used in programming development work are compared to the “civilization and martial arts ” of walking in the rivers and lakes, according to my current thinking, at least it needs: basic skills, light skills, internal skills, strategic strategies, etc.

basic skills

Ten thousand feet of tall buildings rise from the ground, and solid basic skills may make the road of refinement in the future faster. Judging from these years of experience, the most important basic skill is ” learning ability ” (自学); this is a bit abstract and can be divided into: problem search ability , document reading ability , perceptual analysis ability , logical thinking ability , Problem abstraction ability , etc. These abilities cannot be achieved overnight, and require a long-term adherence to the positive cycle: “学习,运用,改进.” Just like the digestive ability of the stomach, even if it has been repaired all the year round, it is already available, but it still needs to be maintained frequently, otherwise it will lead to backlash. How to cultivate “self-learning ability”, everyone has their own method, so I won’t go into details here.

“First of all, you have to be a programmer, and then you must be a “front-end programmer”. Basic knowledge learned in college, such as computer principles, data structures, networks, etc., should also be essential basic skills. For front-end development , the additional basic skills required are:

Three Musketeers of Web Front-end: Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript , for users to view and interact with data through digital interactions using HTML, CSS and JavaScript). –Wikipedia.

  1. HTML(5) : (HyperText Markup Language) is the cornerstone of the Web world.

  2. JavaScript(6) : JavaScript, a literal scripting language, is a dynamically typed, weakly typed, prototype-based language with built-in support for types. Its interpreter is called the JavaScript engine, which is a part of the browser and is widely used in the client-side scripting language. It was first used on HTML (an application under the standard general markup language) webpage to add dynamic functions to HTML webpages. .

  3. CSS(3) : Cascading Style Sheets is a computer language used to represent document styles such as HTML (an application of Standard Common Markup Language) or XML (a subset of Standard Common Markup Language). CSS can not only modify web pages statically, but also dynamically format various elements of web pages with various scripting languages. CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.

Reminder : Good basic skills require at least diligence, a positive attitude, and perseverance.

move

After mastering the basic skills of martial arts, it is very important to learn from others, just like to solve ” various needs “. Web page development, of course, can be done only with the help of the three front-end web masters, but in today’s era, it is bound to be an inefficient choice. It is a wiser choice to choose a suitable “framework”, such as React and Vue.js , to improve development efficiency.

weapon

If a worker wants to do a good job, he must first sharpen his tools . The importance of “工具” really needs no words; it accompanies you and me almost every moment from birth to death. In programming development, equipping yourself with tools that are suitable for you is like a “weapon” that you carry to kill the enemy. From a long-term perspective, there is a tendency to “miss a thousand miles”; as far as I am concerned, using MacOS to develop is far more Windows-based systems are more efficient, and the mood and mood will be much better. For tool selection, it is recommended to take it seriously. In front-end development, the commonly used tools are roughly listed as follows:

light work

In Guoman “Qin Shi Mingyue”, Bai Feng has a line that he likes very much: ” Qinggong does not mean martial arts, but speed determines the distance between you and me “. In software development, the trend of智能化and自动化is becoming more and more obvious. As a programmer, if you can’t adapt as soon as possible, you can imagine the dilemma you will face; it will inevitably be stretched in the wave of technology; so this requires practitioners to be fast, accurate and stable . to address needs while keeping knowledge and skills up-to-更新.

And this快word is naturally the proficiency of business skills that plays a decisive role, but if the workflow mechanism can be simplified and optimized, it will be the icing on the cake. And this topic, the points, lines and planes involved cannot be summed up in one word; it needs to be constantly changed and updated in the process of gradual learning and exploration. But at least one current guideline is: at least semi-automatic, if not fully automatic .

At the current stage, the suggestions that can be given are: get rid of blind busyness, and be diligent in thinking; be good at discovering efficiency problems, use abstract thinking, strip the precise part, and use existing tools or code scripts to replace manual processing, so as to Improve the efficiency of sorting and form reuse; after that, persist and persist.

internal strength

Mr. Jin Yong wrote in “Ei Tian Tu Long Ji”: he is strong by him, the breeze blows the hills; he is horizontal by him, and the bright moon shines on the river. He is cruel to himself and he hates himself, and I am full of self-righteousness . The same is true in programming development; only by having a solid foundation and mastering the ” core principles” can you quickly grasp the essence and keep up with the pace of the times in the ever-changing wave, so as to be invincible.

What is programming inner strength? General knowledge of programming, such as algorithms, data structures, refactoring, performance optimization, object-oriented programming, functional programming, etc., can of course be regarded as internal skills. However, you can look at it more broadly. On the basis of being proficient in using any tool or framework, you can深层次grasp its design, advantages and disadvantages. This is also the practice of internal skills. As far as cars are concerned, meeting drives is just a matter of mastering the play of this transportation tool; knowing its structure clearly, if it is broken, it can be repaired, and there are parts that can be assembled.

Cultivation of internal strength cannot come overnight. Intensive cultivation in the above direction is actually the refinement of internal strength, especially when solving some problems encountered, this is a good opportunity for self-improvement. General knowledge of programming, such as functional programming, object-oriented programming, and design patterns, can also be learned gradually. In addition, it is recommended to read books such as “Code Encyclopedia” and “Refactoring and Improving the Design of Existing Code”.

strategy

In Sun Tzu’s Art of War: Conspiracy and Attack, it is written: The superior troops attack the conspiracy, the second is to attack the Jiao, the second is to attack the soldiers, and the lower is to attack the city . In the field of programming development, this is especially evident – when necessary, write the necessary code. Programmers should not only be the implementers of requirements; they must also participate in the product design stage and contribute what they know and learn to promote a more feasible and good experience for the product. Even at the implementation stage, you should “think twice (design) before doing (coding)”. After experiencing the painful lessons in the production system, Elon Musk summed up the five-step work method and shared with you:

The biggest mistake good engineers make is to keep optimizing something that shouldn’t exist. So I ask everyone to go through the process based on first principles, the first step is to constrain and optimize the requirements so that it is not cumbersome; the second step is to delete redundant parts or process steps; if you don’t delete what you delete The 10% is added back, which means that you can continue to delete; the third step is the iteration of simplification and optimization ; the fourth step is to speed up production, and the fifth step is to automate ; because I also often do this kind of sequential wrong, so I often tell myself that this is the correct order. — Elon Musk

In a nutshell: Validate your requirements , Minimize processes , Simplify and optimize , Accelerate iteration , Automate . For the demands encountered in the work, or the “big homework” to be completed next, it is recommended to refer to The Golden Circle: When paying attention to things, pay more attention to the WHY behind it, instead of just looking at the external ones. WHAT ; and build a continuous iterative loop (Why => How => What) that drives: Do the right thing & do the right thing . Of course, to really do this, it needs to involve agile thinking, product thinking, communication skills, project structure, etc., which can be gradual, comprehensible, and constantly improved.

study reference

  • Awesome-Mac : Collection of excellent macOS software in various categories, you can choose what suits you to improve work efficiency;
  • Nice Front-End Tutorial : Front-end resources, tutorials and opinions that keep pace with the times, you can find some learning directions and materials;
  • Modern JavaScript Tutorial : Benchmarked against the latest JS standards. Explain basic to advanced JS related knowledge through simple but sufficiently detailed content;
  • ECMAScript 6 Introductory Tutorial : An open source JavaScript language tutorial that comprehensively introduces the new syntax features introduced by ECMAScript 6;
  • HTML Tutorial for Beginners : HTML (Hypertext Markup Language) is the brick that makes up the web world, it defines the meaning and structure of web content;
  • React : The mainstream JavaScript library for building user interfaces, revolutionary innovation, unique design, outstanding performance, easy to use;
  • Vue3 : A friendly, multi-purpose and high-performance progressive JavaScript framework, flexible , efficient , easy to use and mature;
  • Svelte : a new way to build web applications; most of the work is done in the browser and moved to the compilation step when building the application;
  • Webpack : is a static module bundler for modern JavaScript applications capable of transforming, bundling or building almost any asset.
  • Vite : a development server based on browser native ES imports (the next generation of web front-end building tools);
  • Refactoring.Guru : Free, online learning code “refactoring” and “design pattern” website, highly recommended collection & reading;
  • Clean Code JavaScript : ? Clean Code concepts adapted for JavaScript.
  • Front-End-Checklist : The perfect Front-End Checklist for modern websites and meticulous developers.
  • Frontend Developer Roadmap : Step by step guide to becoming a modern frontend developer in 2022;
  • JavaScript The Right Way : Aims to introduce JavaScript to new developers and help experienced developers learn more about its best practices;
  • Front-end intensive reading weekly : Front-end intensive reading weekly (Github open source project, 20k Star). Help you understand the most cutting-edge and practical technology.

big job

Topic : Make a “To Do List” web application; the specific interaction design and UI design are not limited, you can refer to excellent web or native applications.
Purpose : “Apply what you have learned”, aiming to train your learning ability (including: how to搜索,提问, use frameworks, tools, and discover and solve unknown problems) and thinking skills (including product thinking, agile thinking, logical thinking, etc.).
Time : Until the end of this training; effective time, about three weeks.
Technology stack : unlimited; the framework can be React, Vue.js or Web Components; the build tool can be Vite, Webpack or rollup.js .

majority direction Specific instructions Score ratio instruction manual
Project, code specification Semantic naming, concise code design, etc., need to comply with common industry standards 20% Front-end project development specification opinion – project specification
Component Package Design Reasonable design of components to achieve the goals of easy readability, easy maintenance, and easy expansion 20% Component Design Principles Black Pearl
Useful and rich Cover basic functionality and add valuable innovations to it 20% For details, please refer to Trello , TickTick and other applications
UI, Interaction Design Well-designed and suitable for PC, Pad, Phone and other multi-terminal devices 20% It can be distinguished by CSS and appropriate DOM
Code Submission Specifications Submit according to each function point, and the Commit Message is written clearly 10% Front-end project development specification opinion – code specification
delivery ahead of schedule This assignment is relatively simple and should not take too much time, at least ensure that it is completed on time 10% Reasonable allocation of time, it is recommended to first conceive the product design, explore how to implement it, and then start coding

Articles you may be interested in

This article is reprinted from: https://www.jeffjade.com/2022/07/31/245-2022-how-to-learn-front-end-development-elegantly/
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment