Your own 2018 front-end development guide
Every time I think there is nothing more elusive than love in the world, I throw a newly published front-end book in my face…
In a flash, 2017 has passed, and it’s a New Year. If I were writing a year-end review, I would never mention all the things I set out to accomplish in 2016 in 2015 and didn’t do in 2017. If I had to make one New Year’s resolution for 2018, it would go something like this: “Sometime in 2018, a framework called Universal.js was born. Within 10 minutes of its release, the number of Stars on Github had exceeded 100K. What follows is the admiration and worship of the whole front-end development community. The syntax of Universal. Js is simple and elegant, yet rigorous, combined with natural high performance and flexible to use scenarios, from now on, people no longer need to learn what JavaScript framework, syntax, front-end fatigue will no longer exist, one move universal. If there is such a unified front-end framework in 2018, all front-end developers will probably wake up laughing at night. The end of YY, or back to reality, let me start from my superficial perspective, clear my thoughts, explore what is worth my focus and investment in the field of front-end development in 2018.
Development tools/software
1. Text Editor/IDE
Development tools/software
The sheer size and bloat of an IDE does not lend itself to front-end development. As a result, lightweight document editors have become front end favorites. Among the popular document editors, VSCode (Microsoft), Atom (GitHub), and Sublime Text (Jon Skinner, a googler) are three of my favorite and most interesting ones. There are a number of articles on the web comparing the performance of the three, and the general conclusion is that VSCode and Sublime Text are on par in terms of overall performance (opening and closing files, searching, etc.), with Sublime Text being the fastest and most fluent in scenarios that require a large number of files to be opened, while Atom is the worst. There is often a situation of stuck crash, the largest resource consumption.
Personally, I’ve been using Sublime Text for a while, and one day a year ago I accidentally got caught up in Atom’s package Active Power Mode (which makes you instantly love writing code…). After planting grass, Sublime Text, one of the most powerful, has given up on Atom. In the year I’ve been using Atom, I’ve had a lot of stuttering, crashes, and crashes. But I didn’t give it up because I loved Atom’s package so much. As of this point, there are 7,171 packages available for Atom on GitHub, which is a harem of 7,000. It’s their very existence that makes me tolerate Atom’s performance problems.
Sublime Text has been around for a decade since its debut in 2007, compared to Atom, which was released in 2014. As you can imagine, Sublime Text has a cult following. Sublime Text ranked third among the most popular development environments in the 2017 Stack Overflow Developer Survey. I believe Sublime Text will remain in the top three development environments in 2018, thanks to its excellent performance and package count on par with Atom.
Development Environment Ranking 2017 from Stack Overflow
As the youngest VSCode of the three (released in mid-2015), I hadn’t used it before. But I included it for the same reason I did when I switched from Sublime Text to Atom a year ago, because one of its plugins was planted. You can map Chrome debug directly into VSCode. You can debug JavaScript with breakpoints. Of course, being the youngest, Plugin is currently not as rich as Atom and Sublime Text. But that doesn’t stop me from taking a keen interest in VSCode, and I’m definitely going to give it a try in 2018.
2. The browser
When it comes to voting for the best browser, Chrome and Firefox give me a long struggle because they are both the best in my mind. If you’re a big fan of Internet Explorer (are you sure?) “Then you can skip this paragraph. I’m sorry I can’t comment on IE because I really don’t know much about it (mostly not…) Each time, I served IE with a ready-made Polyfill putty script.
I have a completely different attitude towards Chrome and Firefox, both of which have a wealth of add-ons that I can’t put down. Chrome comes with Developer tools, and Firefox offers a fully developer-oriented browser, Firefox Developer Edition. Quantum, the latest version of Firefox released recently, is more than double the performance of the regular Firefox browser. Not only did it come with a new generation of CSS engines, it was also the first browser to offer custom tools for CSS Grid design (Chrome57 later added support for CSS Grid features).
Firefox Quantum Developer Edition
For daily development, I prefer to use Chrome’s developer tools because that’s where you get started. Firefox is more of a browser compatibility testing tool. After I got to know the many cool features of Firefox Quantum, I felt it would be a waste to just use it for browser compatibility. It’s time to take a good look at Firefox Dev Tools.
3. User Interface
The UI part is rarely done by me. It is usually done by Web Designer. Photoshop and Sketch are UI design tools THAT I have used, but just that. Personally, I like Sketch very much. In my opinion, the learning curve of Sketch is much smoother than that of Photoshop, which makes it easier for people to get started quickly and more user-friendly. So, for beginners who want to try their hand at design, I personally recommend Sketch. If I have time, I will definitely catch up on Sketch to improve my posture using design software.
2. The HTML/CSS
HTML/CSS
1. CSS Flexbox and Grid
One of the drawbacks of using CSS frameworks is that it makes people forget about CSS… I forgot how to write layouts without relying on CSS frameworks, and EVEN forgot some of the basics of CSS. When I spent most of my time learning JavaScipt, I suddenly looked back and was horrified to find that I had no idea how to implement more complex layouts with CSS. It’s like I’m in my car studying my driving skills, and suddenly I find my tires are gone. No matter how skilled the old driver is, he won’t be able to get out. So, the New Year, I need to “repair the tire”. So where to start? Starting with Flexbox and Grid, of course.
My current understanding of CSS layouts is still block, inline, position, table, and float, but when I search for CSS-related blog posts, CSS layouts have entered the new era of Flex and Grid. It seems that simply using a few traditional CSS display properties is no longer enough to meet the needs of increasingly complex web layouts. Flexbox and Grid, two new modules, provide a more comprehensive technical approach to complex responsive web layouts. You ask which module is better to study? The answer is no, you have to learn both. There is no competition between them, but complementary. So there is no question of who is better, only who is more appropriate in a particular layout scenario.
2. CSS preprocessor
What is a CSS preprocessor? I think it can be explained by analogy. The CSS preprocessor is like the CSS version of Babel, which is a TRANScoder for CSS. Babel can transcode ES6 to ES5 with more environment support, while THE CSS preprocessor transcodes a specific scripting language to traditional CSS code. The syntax for a particular scripting language depends on which CSS preprocessor you are using. Using CSS preprocessors allows us to write more concise code that is easier to understand, saves time, facilitates organizational planning, and facilitates maintenance.
There are three major CSS preprocessors: Sass, Less, and Stylus, with Sass being the most popular. That’s not what I said, and here’s the picture:
CSS Preprocessor Ranking.jpg
3. HTML/CSS Framework
Having said that, the HTML/CSS framework provides me with the most vivid example of choice phobia. Twitter Bootstrap, Materialize CSS, Semantic UI, Zurb Foundation, Bulma, the list goes on and on. Bootstrap, as one of the most popular CSS frameworks, has been released in its fourth edition. The source code uses Sass as the CSS preprocessor. As for framework learning and use choices, as with CSS preprocessors, choosing the most popular will never be regretted.
Three JavaScript.
JavaScript
1. Native JavaScript
There are many ways to cure JavaScript fatigue. But as far as I can tell, there’s a consensus among the industry’s top brass: Learn native JavaScript well. This sounds like a relief, because we no longer have to face a long list of tools and frameworks to learn from. In fact, I think learning native JavaScript is the hardest, most time-consuming thing to do. For me, I don’t feel like I’ve mastered native JavaScript until I’ve done three things:
(1) Skillful operation of DOM (get rid of jQuery) “This guy forgets how to write JS as soon as he operates DOM. He has searched Baidu/Google three times in the past day. Now, with jQuery, you can check the DOM for five times, with high efficiency and less code, and you can operate the DOM in one go without any effort!” I don’t know about you, but this is my experience with jQuery. It does work, but the downside is that it speeds up native JS oblivion. If native JavaScript is basic, jQuery is JavaScript’s wizardry. It’s JavaScript wrapped in a simple, easy-to-use shell. My idea is to learn from jQuery how to make your DOM work without using jQuery. Learn its source code, learn its design patterns. Since jQuery can encapsulate and design native JavaScript so succinctly and quickly, it must “know” native JS best, and it must be an excellent “native JS teacher”.
The reason I think it’s really hard to learn native JavaScript well is largely because the ECMAScript standard has been updated annually since ES6 was released in 2015. The update brings not only more efficient and easy-to-use JavaScript, but also increased learning costs with new features and syntax. However, with Babel, it’s safe to learn how to use ES6. After all, having it as a backstop would almost assuage our worries about browser unsupport. I’ve already seen ES2018 waving ahead, keep learning.
ES6 Arrow Functions is Awesome!
The first time I used Lodash, I felt like I was using PHP. PHP’s function library is notoriously cluttered, but I have to admit that PHP is incredibly easy to write, and PHP has functions ready to use for almost every function I come across at work and can think of. JS toolbars like Lodash and Underscore not only optimize existing JS functions, but also add many useful new ones. However, with the popularity of ES6 and the addition of many new features, libraries like Lodash seem to have become strangers. However, like jQuery, Lodash is “distilled” into a variety of native JS manipulation and design techniques. For me, who currently only use it but can be buggy if I try to implement a function myself, Lodash is definitely a wake-up call.
2. JavaScript framework
React, Angular, Vue? Who will I fall into in 2018? It’s gonna take about a thousand words… To ensure the reading experience, listen next time… (In fact, I have written so much in one breath that I can’t move it for the moment. Please wait for me.)
React vs. Angular vs. Vue
To be continued… To be continued