The author | GanChaoYang (xiao q) edit new retail product | | orange king alibaba tao technology
We can compare the learning route to the segment of the game, which has its own positioning and things to practice in different segments:
- Bronze – Starting from Scratch Primary school: full of enthusiasm, see the hope and future of this industry, ready to start learning Web development knowledge. A. I have learned the basic operation of HTML, CSS and JavaScript through free learning resources such as W3CSchool. Write a simple love page for your girl/boyfriend to show off your efforts, and if not, forget it
- Beginner: Know how to use HTML, CSS and JavaScript to implement basic page development functions a. Choose a project that can cover multiple scenarios and adjust the difficulty as you wish, such as blog system, bookkeeping, Markdown editor, etc. B. Choose between React and Vue frameworks to learn from
- New player: Knows how to use frameworks to implement the above example project A. Learn state management tools like Redux, Vuex, or MobX and apply them to previous projects b. What benefits does the Thinking state management tool bring to your project
- Platinum V – Novice driver: knows how to use scaffolding to create projects and can structure code in a modular way Learn TypeScript and rewrite the previous project to focus on controlling data structures and types. Learn Node.js, try to cooperate with the database to achieve a more complex CMS (content management system) than the blog system, such as library management system, warehouse management system
- Platinum I – Basic Good driver: An A. who knows how to write business code in Node.js or TypeScript Think about what code is redundant and what logic can be shared across multiple components in previous projects using frameworks b. Learn to progressively replace code written using the framework with ES2015 or newer JavaScript standards
- Diamond V – Calm natural old driver: if it is a logical abstraction, module packaging has a certain understanding and experience of a. Thinking about how to use pure JavaScript to abstract non-rendered, non-DOM related code from business components B. Introduce unit testing tools to test pure logical code and strive for coverage of more than 80%
- Diamond I – Track Novice Beginner: If you have met all the above conditions a. Think about the differences between different code philosophies (OO, FP, etc.), different code structures (MVC, MVVM, etc.) b. Think about the design intentions of different frameworks, and think about the differences between different programming languages in solving the same kind of problem
Here I have drawn a purely technical path from 0 to senior front-end engineer level. I believe that many experienced students will find that I omitted a lot of content in the middle, but it is not difficult to find the route in the first half of the “learning” gradually turned into the second half of the “thinking”. Excellent engineers in addition to need to have in the field of pure technical precipitation, need more to technology, the team, the ROI (return on investment) of thinking, of course this is still not enough to support our smoothly through the crisis “35” programmer, very long, is the road ahead of diamond and king, up youth who said that the programmer is your job? Remember that many years ago, I was a complete novice like you, learning Web development by myself from zero, and even later I did not enter the professional courses to learn computer, so let’s listen to my story as a “predecessor” how to completely rely on self-learning till now.
Mine starts at zero
I’m a self-taught front-end engineer. I remember my first experience with front-end was in junior high school when it was very popular to share VPS and register a.tk free domain name. And for a kid new to Web development, it was an exciting way to explore the “grown-up world”. At that time, the most popular blog management software was WordPress, which was written in PHP. As a very mature CMS software, WordPress had very rich community resources, such as themes, templates, plug-ins and so on. And the small fart child that pays attention to individuation very as, it is to want oneself to do a theme of course! So I set foot on the road of Web development, before this I was in contact with Visual Basic such as Native languages. With WordPress themes as the entry point, I started to learn PHP to call WordPress apis and output content, HTML to write theme templates, CSS to “decorate” my blog, and jQuery to achieve page dynamic effects. Yes, at that time most people were working with jQuery and not JavaScript. A $function can do a lot of things. It was the first time THAT I realized the value of “framework”. Step by step, the following happened (not exactly right, it was too long after all) :
- I found that some style effects on the page could not be displayed properly in IE browser, so I began to go online to learn the special treatment of CSS in IE, including the use of reset. CSS, normalize.css and other tools;
- I had to refresh the page every time I clicked on a link, which was a terrible experience in those days when Internet speeds were not so good, so I started studying how to switch the page content without refreshing the page using jQuery/JavaScript. A. The browser supports a technology called XMLHTTPRequest, which allows us to get information from the server without having to jump to it. From there, we can learn the differences between HTML, XML and JSON. B. Learned for the first time that pure data in JSON format can be transmitted through the server, and then the front-end parses the data through JavaScript and renders it into complete HTML with the front-end template engine; C. Learn how to transmit information to the server through the path, query, hash, POST and PUT request bodies in urls. The server dynamically processes various data and returns results through these information. D. SPA (Single Page Application) development habit is in embryonic form;
This brings me to the “silver” stage.
Contact Node. Js
While I was happily designing a custom theme for WordPress, I came across a new technology called Node.js on a front-end site. The encounter with it changed my future learning path, which affects me up to now. In 2009, Ryan Dahl released node.js, an application runtime environment based on Chrome JavaScript V8 engine, which allows developers to run JavaScript in addition to the browser. There are also standard libraries that allow JavaScript script launches to do things that previously could not be done in a browser to start an HTTP server application.
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/);
Copy the codeThis code is an example of code written on node.js website in 2010. By chance, I was deeply attracted by such a simple piece of code, even though installing it still required cloning the entire project code from GitHub and running the following commands:
$ ./configure
$ make
$ make install
Copy the codeThis time it takes at least ten minutes to compile, but once you’ve installed it, run the code above, open http://127.0.0.1:8124/ in your browser, and see the word Hello World as if the door to a new World had opened. At the time, the only server-side application I had ever worked with was PHP, and PHP was essentially a template engine that didn’t intuitively handle the request itself but responded with CGI. The ability to do more things is tempting for beginners who have just learned programming. From there, Node.js and NPM began a decade of rapid development. From pure server-side application development, to development tools, engineering tools, and now the FaaS (Function as a Service, Serverless) development mode. Node.js has become an indispensable skill for Web engineers, whether it is used to develop server applications or tool applications, or even developing mobile apps using Electron or React Native. Node.js enables front-end engineers to learn more about system-level concepts such as networking, I/O, memory, file systems, and so on, many of which are not normally visible on the browser side. And learning this knowledge is very valuable for understanding some of the principles behind front-end development, just like learning algorithms. Conclusion: Learn Node.js and some of the basic computer principles involved.
Framework era
When I was working on WordPress themes, most theme developers did some simple effects on the front end, and some even used JavaScript to do things that could only be done on the back end, such as listing articles, loading and rendering article content. At the time, the theme developers were using jQuery to do JavaScript because pure handwritten JavaScript was cumbersome at the time (ES4 era, Many of the native apis that are widely used today are still not available) so jQuery was the preferred solution.
From PrototypeJS in the early days, jQuery later, Backbone in MVC era, AngularJS started MVVM mode, React introduced the concept of FP, Vue successfully started the path of progressive development experience. All the way down a chicken feather, was criticized by various people front-end field a month to develop a new framework, “learn not to move”. However, as a developer who has also written frameworks and toolclass libraries, I like to use an example often used in the pan-tech world as an analogy to the front end:
The ultimate goal of technology is to make it invisible to people.
In the era of jQuery, front-end developers used JavaScript to take DOM elements from the page, add events, and then dynamically change the page through class and style to complete the response to user behavior.
Backbone era, originally used in the desktop software development MVC model was introduced into the front-end development, front-end developers found that the complexity of Web development has needed to use these more mature development model management;
From here on in the AngularJS era, Google brought two-way data binding to the front end of development, taking control of DOM elements through JavaScript and turning it into just a matter of what needs to be changed in the Model layer. Vue reduces the cost of this model to a significant degree, making it easy for novice developers to get their hands on this convenient development model.
In the React era, Scientists of Facebook introduced the idea of functional programming into front-end development, focusing on the traceability, traceability and management of data links, so that the entire data link could be transferred as a single link as possible.
Although the front-end domain is often said to be “a new framework a month”, each framework actually addresses the actual requirements of their business scenarios during the iterative process, rather than trying to make a “break change” on every technical detail.
The frameworks I currently recommend for learning React and Vue are:
• Both are currently one of the most popular frameworks and can be expected to meet the needs of job seekers for the next 3-5 years;
• React: Introduce the concept of Functional Programming to make code writing more rigorous, maintainable and logically navigable;
• Vue: Makes the MVVM pattern very simple and easy to get started with, and the Progressive JavaScript Framework is well positioned. And the Composition API of Vue 3.0 now allows Hooks to play better than React Hooks in some ways;
Conclusion: Please don’t be afraid to learn! Don’t be afraid of new technology!
The road to engineering
While I’ve been working with frameworks and Node.js, I’ve found that JavaScript can do more than just display content and render simple interactions. But essentially the DOM elements on a page are controlled around multiple pages, and it wasn’t until I opened some of Google’s sites that I realized that a site could be called an “application” in addition to a page. Since Google released a great GMail that did everything without a page refresh, we’ve seen that the web can support complex logic and application scenarios. Everyone’s enthusiasm is unusually high, thinking about whether they can make the project in charge of also have such a strong and advanced appearance. But as the project gets more complex, the size of the code becomes very difficult to manage, and that’s where engineering comes in.
Engineering collaboration
For enterprises, in addition to high r&d efficiency, the security and compliance of R&D links are equally important. What is safety compliance? Manageable code version, controllable release process and controllable gray scale mechanism are all necessary tools for big factories to ensure the stable progress of project process. There are many beginners or students who have no experience in large companies who write projects alone, but more front-line projects require at least 2~3 or more people to participate in the development. At this time, because everyone’s level and development habits are inconsistent, these inconsistencies directly lead to the overall RESEARCH and development efficiency and project progress are greatly affected. So there was a need for a model that allowed people to develop on a level, and engineering requirements came into being.
• Version control
Git: GitHub, GitLab, Coding…
SVN: BitBucket, Google Code……
• Code style checker JavaScript/TypeScript: ESLint
• Test tools
Unit tests: Karma, Jest, Mocha…
Continuous integration: CI
•…
Engineering development tools
From directly using JavaScript code with Script tags, to the need to import jQuery files and main program files separately, to the emergence of Node.js using NPM for dependency library management and using Webpack for packaging and compression. The development of engineering tools has witnessed the development history of front-end engineering in the past ten years. To have a better understanding and practice of the currently commonly used engineering tools is definitely an indispensable step on the road to excellence.
• Dependency package management tools: NPM and YARN
• Packaging tools: Webpack, rollup
• Scaffolding tools: create-react-app…
Engineering development language
I’m sure many of you have heard some anecdotes about the early days of JavaScript. For example, there was not much rigorous thinking at all, or it was very obscure in many scenarios, such as implicit transformations. Some people think that JavaScript’s “flexibility” or “looseness” has something to do with its current status, although to some extent it does have something to do with the low barriers to learning JavaScript. But as I mentioned above, these features can become very bad experiences as the project size and people size grow and swell:
- Due to the lack of good technical documentation between teams, the situation of unequal information directly leads to logical conflicts in the code without good unit testing;
- The API of the third-party dependent library makes extensive use of the loose features of JavaScript in its design, which leads to frequent “confusion” when users refer to it.
- When JavaScript is needed to interact with other languages (especially strongly typed languages), the loose habit of JS will make the receiver feel very confused, and the actual access cost for both parties will be much higher than the previous estimate. In order to solve this situation, people from different fields of programming have started to come up with solutions. As a result, many wheels have been created:
• Java 系：Scala.js、ClojureScript
• Go: GopherJS
Microsoft: the TypeScript
• Facebook: Flow, Reason
TypeScript’s father, Anders Hejlsberg, created Turbo Pascal, Delphi, C# and other languages that are important in computer science. TypeScript makes a huge difference again:
• The introduction of strong typing allows us to switch from a value-first mindset to a type-first mindset when writing code;
• The introduction of strong typing helps development tools (ides, etc.) better provide developers with convenient capabilities such as intelligent completion, type checking, compile-time checking, etc.
• TypeScript allows JavaScript to interact with and even convert to other languages;
Engineered generic components
As the demand grew, lazy engineers abstracted things they used a lot, from ExtJS from a long time ago to Bootstrap from Twitter engineers to Today’s Ant Design and Element UI. All help us to complete the development of some common page capabilities faster, better and more stable.
• React: Ant Design, Fusion Design
• Vue: Element UI, iView, Ant Design of Vue
Logical abstraction ability
As I get more experience writing JavaScript applications, the technologies and scenarios I try get more complex. As the logical codes became more and more complex, I gradually found a new problem. Most of the logical codes I wrote were similar, but some of the details were different, and these codes were often the ones with the highest maintenance costs. This made me very confused. How can I make my code not so tedious to write without losing the logic of the original code? This reminds me of the framework I learned before. Their realization principle is not to compress the logic code that we originally wrote very tedious, so that we can write more concise and intuitive?
This is code written by a school admissions candidate I interviewed once. The background is to quickly determine the establishment status of different buffs in a self-paced board game. But it is clear that such code should never exist in real development:
- Redundant code logic;
- If the general decision logic changes, each one needs to be manually maintained;
- Not good maintainability;
So I suggested ways to make this code more “elegant” and maintainable.
export default {
beastBuff: (state) => {
let arr = [];
if (state.raceCount[0]['beast'] == 2 || state.raceCount[0]['beast'] == 3) {
console.log(`you got 2 beast`)
arr.push(state.racebuffdata[8])
} else if (state.raceCount[0]['beast'] == 4 || state.raceCount[0]['beast'] == 5) {
console.log(`you got 4 beast`)
arr.pop()
arr.push(state.racebuffdata[9])
} else if (state.raceCount[0]['beast'] == 6) {
console.log(`you got 6 beast`)
arr.pop()
arr.push(state.racebuffdata[10])
} else if (state.raceCount[0]['beast'] < 2 && arr.length == 1) {
arr.pop()
}
return arr;
},
caveclanBuff: (state) => {
let arr = [];
if (state.raceCount[1]['caveclan'] == 2 || state.raceCount[1]['caveclan'] == 3) {
console.log(`you got 2 caveclan`)
arr.push(state.racebuffdata[11])
} else if (state.raceCount[1]['caveclan'] == 4) {
console.log(`you got 4 caveclan`)
arr.pop()
arr.push(state.racebuffdata[12])
} else if (state.raceCount[1]['caveclan'] < 2 && arr.length == 1) {
arr.pop()
}
return arr;
},
demonBuff: (state) => {
let arr = [];
if (state.raceCount[2]['demon'] == 1) {
console.log(`you got 1 demon`)
arr.push(state.racebuffdata[5])
} else if (state.raceCount[2]['demon'] < 1 && arr.length == 1) {
arr.pop()
}
return arr;
}
// ...
}
Copy the codeIt is not hard to see that the logic in these xxxBuff functions is very similar, but also different. So how can this code be optimized and abstracted? I presented TA with a sample code:
const beastConfig = [
[2, [2, 3], 8],
[4, [4, 5], 9],
[6, [6], 10],
[2]
]
Copy the codeEvery number in this code can be found in the beastBuff function above, so how do you reuse them into the logic code to achieve the same functionality as the original code?
I also wrote him a reference answer:
const generateBuff = (rate, configArr) => {
return state => {
const arr = []
for (const [ output, conditions, index ] of configArr) {
if (conditions && index) {
// Buff calculating
const isHit = conditions.some(condition => state.raceCount[0][race] == condition)
if (isHit) {
console.log(`you got ${output} ${race}`)
arr.pop()
arr.push(state.racebuffdata[index])
break}}else if (state.raceCount[0][race] < output && arr.length === 1) {
// Last condition
arr.pop()
}
}
return arr
}
}
export default {
beastBuff: generateBuff('beast', [
[2, [2, 3], 8],
[4, [4, 5], 9],
[6, [6], 10],
[2]
]),
caveclanBuff: generateBuff('caveclan', [[2 [2, 3], 11], [4, [4], 12], [2]]), / /... }Copy the codeAn excellent engineer is also required to have the ability to judge the logic in the original code through hard code by observing the common points and thinking whether they can be translated into abstract parts.
Be D.R.Y.! (Don’t repeat yourself)
Higher level of thinking
As I continue to explore and study different businesses, different scenarios and different code difficulties, I find that different frameworks and architectures emerge one after another in the front-end field and even in the whole programming field, which is essentially a search for Better Practice for various actual business scenarios. As mentioned earlier, different framework authors adopt different code structures and even philosophies when developing, and these different perspectives may not be directly reflected in the framework’s source code. But I won’t say that reading source code is completely useless! Because reading source code can at least learn some trick or code habits.
But it’s more important to understand how to think in terms of apis and systems architecture, because if you do, you’ll gradually become more comfortable with different technologies than other people.
EOF
This process is not a rigorous learning route, but more a summary of my personal experience. Of course, in addition to the knowledge points I mentioned, there are many different branches corresponding to different actual businesses and scenarios. For example, we can develop desktop application with Electron, mobile application with React Native/Flutter, embedded application with Node.js/QuickJS/FibJS, and tensorflow.js Develop machine learning applications suitable for front-end and even edge computing, improve the use experience of Web applications to the realm of native applications with WebAssembly…
There is a famous prediction about JavaScript: Anything that can be rewritten in JavaScript will be rewritten in JavaScript and whether or not that’s going to be fully implemented, but we’re already seeing a lot of applications going to the cloud in the form of Web applications, Photoshop, audio and video editing software, code editors, even big games — things we never thought we could do in a browser. Is front-end development difficult? Not difficult, the threshold is relatively low. Simple? No, it’s not. You already know it by believing what you see here. Of course, it’s your own experiences and opportunities that determine how you actually choose your path and direction.
Recruit talents!!
Amoy technology department interaction and building team is recruiting partners to do together for thousands of businesses, hundreds of millions of consumers of the partnership platform, if you are interested in technology, visual construction and other technologies and scenes, or want to understand Amoy application so many marketing pages is how to quickly produce words, Warmly welcome to send resume to [email protected], joint code rookie fly first.