It was as deep as the sea, and I only swam back and forth in the shallow water.
I met
When I was still in college, I used servlet to write Java Web programs. At that time, I wanted to judge user input and submission on the web page, and FOUND that A language called JavaScript was needed. At first, I used native JavaScript to operate Form directly according to W3C. The W3C didn’t just spit on Google and keep copying. The sky was blue, Google wasn’t out of China, and I was using Google Buzz every day.
Of course, I knew nothing about CSS at the time, and I had just heard about jQuery.
An introduction to
I accidentally read a book on JavaScript DOM advanced programming and found that JavaScript is not so simple, so I looked at a book on CSS and HTML design patterns and found that CSS is not so simple.
At first glance, the titles of these two books may seem esoteric to beginners, but the truth is that they are both fundamental knowledge and good inspiration for a systematic understanding of JavaScript and CSS.
Entry to surrender
My first job was as a back-end programmer for the Java Web, and since then I’ve had an identity :” back-end programmer “.
In terms of job definition, the back-end is corresponding to the front-end. The back-end is responsible for the logic invisible to users, while the front-end is responsible for the logic visible to users. That is to say, the back-end basically has no chance to write JavaScript and CSS. Young and frivolous, not used in the work, rarely spend time learning, my front-end is not fully introduced so gradually give up.
We met again in entrepreneurship
When the mobile Internet was on the rise, I also felt that I should start a business, so I stumbled into a startup.
The idea that entrepreneurship brings opportunities, wealth, and dreams is actually less people, less money, and more life. Although I am still a back-end programmer, this definition is not so obvious anymore, and I still write some HTML occasionally.
Negotiating with the front-end API and what data to return in the page template is a common part of being a back-end programmer when starting a business.
At first, the front end just gave the data it needed. The front end didn’t understand the logic of the back end, and the back end couldn’t understand the complex JavaScript and CSS.
As the project becomes more and more complex, the direct output without constraints leads to the lack of predictability of back-end business logic and the imperative of constraints, which also leads to obvious differences with the front end.
What is the disagreement? The front end hopes that the data can be flexibly output, while the back end strictly limits the responsibilities of the API for unification. At this time, the front end has to call different APIS for reassembly. This was a disagreement that Facebook’s GraphQL was trying to resolve, and neither I nor the front-end was able to solve it at the time.
With this disagreement, I began to pay attention to how the front end builds and uses the data of the back end, and put myself in the front end’s shoes.
Wishful thinking hurts the country, but practical work prospers the country. Due to lack of practice, my perspectivism lost its way and made no progress.
Suddenly one day, I was still trying to make my Epiphany, but the front end quit, more important is that all the front-end business I was responsible for docking will be taken over by me.
Really don’t understand, can only learn.
In actual combat
Ideal is beautiful, reality is complicated. In order to better maintain the front-end code, we decided to refactor.
The road to refactoring was long and hard. It was only a month, but it seemed like half a year.
start
First of all, I have learned the basic syntax of JavaScript. The goal of refactoring is to obtain better maintainability, code reuse is the minimum requirement, and it is very necessary to be familiar with JavaScript inheritance.
The first choice of the JavaScript language essentials, in order to quickly only see the function and inheritance of the part, the basic class pattern inheritance and prototype inheritance have a clear understanding, so the reconstruction began.
During the reconstruction, I encountered many details of JavaScript that I didn’t quite understand. I basically finished it while reading books on Google and bought authoritative JavaScript guide for reference.
JQuery Performance, optimize jQuery selector
-
https://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance–net-5551
-
http://www.artzstudio.com/2009/04/jquery-performance-rules/
specification
In order to maintain a consistent JavaScript style, a number of specifications are queried and referenced
-
https://google.github.io/styleguide/javascriptguide.xml
-
https://github.com/styleguide
Github StyleGuide, which at the time was just an introduction to CSS and JavaScript how to write and interact, has evolved into the http://primercss.io/ project.
Github StyleGuide suggests giving each page bound event DOM a unique and recognizable name prefixed with JS -. The advantage of this is that even if the DOM structure changes, as long as the js- name remains, the JavaScript code does not need to change. At the time, a lot of template-generated HTML pages and event bindings were done in jQuery made it a great maintainability improvement.
css
When THE size of HTML pages is close to 100, it is not easy to maintain the maintainability of CSS, and maximizing the reuse of different CSS views is very challenging. CSS absolutely needs architecture, and look at architecture everywhere.
Jonathan Snook https://smacss.com/ was the most important reference at the time. This book provided enough theoretical and practical tips for CSS modularity and architecture, http://nec.netease.com/ of netease provides a CSS specification with practical significance. Github Style Guide also introduces a large number of CSS naming and HTML structure solutions, so the reconstructed CSS combines the characteristics of each family. True compatibility
engineering
Webpack wasn’t around, Gulp wasn’t around, less and GruntJS were the darlings of front-end engineering.
Templates use their own string concatenation, EJS are difficult to use and ugly to embed into a page. Back then, underscore was also used, which is best combined with backbone.
The advanced
After a reconstruction of the actual combat, the complex front-end project has become a veteran driver on the road, from the specification formulation, technical selection, scheme evaluation can be stable grasp.
Now that I’ve learned the fighting skills, it’s time to practice the internal forces.
Read the JavaScript Language Essentials. This is a very thin book that covers almost everything about the JavaScript language itself, although much of ES 6 is a bit out of date, with Douglas Crockford’s analysis right in.
Deep into the JavaScript runtime details and all the truth about the prototype recommend http://dmitrysoshnikov.com/ ECMA – 262-3 in detail, This is the most thorough explanation I’ve ever read of how JavaScript works and how object inheritance works.
MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript here include the latest JavaScript concept and principle of the document well and did a simple content, the level is clear, Requirements of different levels can be met.
https://javascriptweblog.wordpress.com/ this brother articles had also just right, but more difficult.
Vuejs, React, Angular are so popular now, http://babeljs.io/ a lot of people have already thrown into the embrace of ES6.
Studying nodejs.
Afterword.
I don’t do much about the front end in my work anymore. The front end is developing surprisingly fast. I really don’t know html5 and CSS3, people call me a back-end programmer, and I’m just a programmer.
Recommend wecatch programmers fall for the deep sea github @Jerryshew. Us tuan works for the big front end, and he’s not just a front end.
The appendix
-
Fall in deep https://github.com/jerryshew
-
Nguyen other es6tutorial https://github.com/ruanyf/es6tutorial
-
JavaScript DOM high-level programming at https://book.douban.com/subject/3082278/
-
Proficient in CSS and HTML design patterns, https://book.douban.com/subject/3158926/
-
prototypejs http://prototypejs.org/
-
graphql https://github.com/facebook/graphql
-
JavaScript authoritative guide to https://book.douban.com/subject/10549733/
-
ejs http://www.embeddedjs.com/
-
underscore http://underscorejs.org/#template
-
ECMA-262-3 in detail http://dmitrysoshnikov.com/
-
MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript
-
https://javascriptweblog.wordpress.com/
-
es6tutorial https://github.com/ruanyf/es6tutorial
-
smacss https://smacss.com/
-
github style guide https://github.com/styleguide
jquery selector optimize
-
https://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance–net-5551
-
http://www.artzstudio.com/2009/04/jquery-performance-rules/