Book Recommendations

Professional JavaScript for Web Developers (3rd Edition)

• More of a dictionary-style book, known in the community as the telescope, the ruby book, the red book, and more nicknames waiting for you to discover

JavaScript: The Definitive Guide (5th Edition)

• It's a dictionary, known in the community as the Rhino book; characteristics: thick, comprehensive

JavaScript: The Good Parts

• Written by a highly authoritative figure in the JS world, the inventor of JSON
• Known in the community as the Butterfly book; characteristic: thin
• It's entirely about JS syntax, doesn't involve frontend, and along the way roasted some developers

ps: none of the above books cover ES6

You Don't Know JavaScript series

• This series can be said to be the most in-depth among JS books
• 6 books in total (3 volumes in print), a well-known open-source book on GitHub
• https://github.com/getify/You-Dont-Know-JS
• Currently only the first two volumes have Chinese print editions
• As the title suggests, it covers problems you wouldn't normally dig into
• As well as some slick tricks, like using ～～ to truncate to an integer, instead of Math.floor

Understanding ES6

• Bought it because the author is the author of the Red Book
• Currently reading this; it doesn't cover ES7 knowledge
• No comments for now

CSS Secrets

• Read it a few days ago, all kinds of CSS slick tricks, breathtaking

ps: I pretty much have all the books above; there are some other books I found uninteresting, so I just won't introduce them

Comparison of the Three Mainstream Frameworks

Angular

• A powerful heavyweight framework, crafted by Google
• Because of a complete overhaul in 2.0 (calling them two frameworks wouldn't be going too far), the community was split
• By the way, 1.0 and 2.0 syntax differ greatly, and some tutorials are still for 1.0
• Versions after 2.0 have compatible syntax, collectively called the new version; seems like 5.0 is out now
• 1.0 doesn't need npm to build; starting from 2.0 it does
• Starting from 2.0, TypeScript is treated as the favored child, so you need to learn TS as well
• Summary: powerful features, but the learning cost is also high

React

• A very flexible lightweight framework, crafted by FaceBook
• JSX, virtual DOM, pioneer of the componentization idea
• There's a saying that in React everything is JS: JSX replaces HTML, and CSS is also written in JS
• Because everything is controlled by JS, that's also what makes it flexible
• But in practice, its writing style differs greatly from classic web writing, making it hard to adapt at first
• Has a twin brother, react native
• As the hottest frontend framework of 2015, it pioneered many advanced ideas
• Currently still ranks first among frontend frameworks by GitHub stars
• But I don't think its docs are very friendly, https://reactjs.org, and you need to use a VPN
• Recommend the Bootstrap translation, only a bit older than the official docs, and no VPN needed, https://react.bootcss.com

Vue

• Also a lightweight framework, but its writing style is more traditional than React
• The author is Chinese, currently working at Google Creative Lab
• As the hottest framework of 2016, born later, it absorbed many advantages from other frameworks
• Like React's componentization idea, Angular's directives
• The latest version supports TypeScript and JSX, which you can optionally use
• Pioneered the .vue file (requires npm to build), a friendlier way to write components
• Very friendly documentation, progressive tutorials
• And still recommend the Bootstrap mirror, much faster than the official site https://vuejs.bootcss.com/

ps: Because Angular's heavyweight nature is suited for developing large applications and not so suitable for developing H5 apps, I recommend choosing one framework between React and Vue to learn. (Of course this doesn't mean Angular is bad; almost every feature is built into Angular, it's just that small apps may not need so much, while lightweight frameworks give us more room to choose.) Among the three frameworks, Angular has the highest learning cost and also the most features, like including a built-in ajax plugin, which the other two frameworks don't have. Then Vue, then React. React is actually a very small framework, but it has a huge ecosystem; routing isn't provided by the React official team and is entirely left to the community, which is also one reason its docs feel incomplete (features you can't find after searching the entire docs—turns out they weren't meant to be found there at all, flips table), while Vue's routing is maintained by the official team. Although I want to evaluate fairly, I've used Vue the longest, and I have to say Vue is really good, and it has international influence too (on GitHub its star count among JS frameworks is second only to React). Alright, I won't interfere; I believe you already have a pretty good idea which to choose (advance congratulations to yet another one I've dragged into the Vue pit; while you all learn Vue, I'll secretly learn the other two frameworks on the side, #[funny] ). Finally, don't stubbornly stick to one framework; try more new things. After all, life is about tinkering :)

About node & npm

Q: What is node?

A: There isn't really a great definition of what node is. It's not a new language (it uses JS, but has its own independent APIs), nor is it a web container (you don't have to use it to write web). Simply put, it just peeled JS, which originally could only run in the browser, out of the browser. Its original design intent was to create a backend that supports async.

Q: What is npm?

A: npm stands for node package manager. It's node's package management tool, used to download and publish third-party node packages. When you install node, npm is generally installed along with it.

Q: So node is a backend technology, does frontend need to learn it?

A: After introducing so much above, I'm sure everyone noticed that all three frameworks recommend using npm to build, so you might be curious why frontend also needs node. This question is actually easy to understand. Node isn't only for writing backends, just like Java isn't only for writing web. Of course, node isn't for writing frontend either. Node's use in frontend is equivalent to a tool, that's all. Before node appeared, many JS minification tools were written in other languages. With the appearance of node, people were also happy to use JS to handle frontend stuff, and then many frontend tools appeared, like webpack. Then node gradually became a frontend development platform. Many plugins can also be downloaded with npm, no need to download from official sites. Through the node platform, frontend development became more diverse, like auto-minification, ES6 to ES5, less auto-compiling to CSS, etc., removing a lot of tedious operations, more oriented toward a modern development model. Back to the question, whether frontend should learn node: after saying all this, frontend's use of node is really just using packages others published. Unless you're the developer of those packages, being able to use npm to download and install things is enough. Because the node parts have been written for you by others.

About ES6

• Q: What is ES6?

• A: In the introductions above, I believe I mentioned ES6 many times, and everyone might have some doubts: doesn't frontend use JS, what the heck is ES6? ES stands for ECMAScript. You can simply understand it as a version number of this JS. For example, the JS version IE6 supports is ES3. In many framework docs, you might see keywords like let and const—what the heck is that, doesn't JS use var? Don't panic. The first time I saw these things, I thought they were using another language for the examples. Actually these are all ES6 syntax.

• Q: Since it's just a version number, why haven't I heard of ES5? Why is ES6 so badass?

• A: Because ES6 is the biggest change among JS version changes. Think about it, even the keyword for defining variables is no longer the eternal var—it's practically a new language. Because ES6's changes were huge, it became a landmark version, so versions after ES6 are also collectively called ES6, and the old syntax before it is collectively called ES5.

• Q: Is ES6 worth learning?

• A: I'll tell you clearly: ES6 as an advanced JS version is very much worth it. In everyday terms, "you profit"!

• Q: If I learn ES6, what about the JS I learned before?

• A: ES6 is a version of JS, backward compatible. You don't need to worry that what you learned before was wasted. So you can mix ES5 and ES6 in it, like mixing var and let. But I recommend using let to define variables except when supporting old IE, because var has some flaws, which is why let and const appeared. Of course you can also use babel (an npm package) to compile ES6 into ES5.

ps: I won't list other questions one by one. You can ask me or Master Yi (recommend using Master Yi #[funny])

About TS

• Q: What is TS

• A: TS stands for TypeScript, produced by Microsoft, a strongly-typed variable version of JS, designed by the designer of C#, so it has a strong C# flavor. Recommended for people who like C# or hate weakly-typed JS to give it a try (manually @Dinglin here).

• Q: What's the relationship between TS and JS

• A: As said above, TS is a strongly-typed variable version of JS, depends on NODE. If you want to use it on the frontend, you need to compile TS into JS

ps: For more on TS please baidu or google it yourself. By the way, there's also a JS precompiled language called CS (CoffeeScript), produced by GitHub, Ruby/Python-style JS, but it's not as popular as TS, maybe because CS is still weakly typed, and the class syntactic sugar it solved was no longer needed after ES6 came out

Other Suggestions

• I suggest learning ES6 well, otherwise you might not even be able to read the docs. Here's an open-source ES6 book http://es6.ruanyifeng.com/
• Then don't be afraid to use npm to build projects. Try following the framework docs and installing with npm; you'll find it's very simple (after all it's just installing, not asking you to write it)
• When you have time, research more open-source projects, browse GitHub, the node community (sorry, I don't like reading CSDN). Below I'll paste some resources I've treasured

Some Resources

• Bilibili https://www.bilibili.com/ (pretend you didn't see anything)heavyweight treasure
• Alibaba Icon Library http://www.iconfont.cn/ (comes in handy when there's no UI) ps: last time classmate Feng asked me how I made the graphics so fast, what knife I used; actually I didn't use any tool at all, I just stole the icons from here (but I didn't tell her, hahaha)heavyweight treasure
• SVG to font https://icomoon.io/app/#/select
• Some image assets http://588ku.com/banner/?h=bd (actually there are many similar sites)
• A magical website http://www.html5tricks.com/ (although it's an obscure little site, I can find many astonishing works in it, and it's also the main site I look at source code from) heavyweight treasure

Afterword

Typing is exhausting, going back to write code

---

For more interesting tricks, please follow my WeChat official account: DealiAxy

Every article is collected on my blog: blog.deali.cn