Front-End Development Growth Path

0. Career Development Advice from Seniors

1. Patience

The persistence of 1px.

2. Outdated concepts; pay attention to new technologies

Do not use compatibility as an excuse to ignore new technologies.

3. Continue to deepen foundations

JS foundations are not yet solid enough.

4. Push user experience to the extreme; attitude is important

User experience is not just the concern of designers; front-end developers should also value it.

5. Strive to drive projects; don't limit yourself to the front end

There aren't many things strictly within a front-end developer's duties, but the success of a project team requires the cooperation of all members—for example, customizing a simple event page design tool for PMs to drive project development.

6. Understand what new technologies are for

You don't need to chase and learn every new technology, but you should stay aware and have some understanding of them, because the problems you encounter might be easily solved with a new technology.

7. Don't just do your own job; have a big-picture view

Project success is the primary goal for all team members.

1. Front-End Development Requirements from Seniors

1. Accumulate knowledge in design, product, and interaction

2. Learn new front-end technologies:

• Front-end automation tools (Gulp/Grunt, etc.)

• Modularization (CommonJS, AMD/CMD module loaders, various Bundlers, ES2015 Modules, etc.)

• Front-end MV* frameworks (Backbone, Angular, etc.)

• Languages that compile to CSS and JS (Less/Sass/CoffeeScript, etc.)

• Front-end automated testing tools (Karma, Mocha, Web Driver, etc.)

• NodeJS learning method:

  1. First, you must learn JS.

  2. Find a simple project on GitHub to imitate: for example: https://github.com/felixge/node-mysql

  3. Write a blog management system based on NodeJS: article publishing, management, member management, permissions, and file management. Then submit it to your own GitHub.

  4. Improve it step by step. Make it look like WordPress.

  5. By this stage, you will know what to do next.

• Master JS animation libraries like TweenMax (and the emerging ThreeJS)

3. Have a basic understanding of visual communication/color composition/graphic composition

4. Basic knowledge of website performance optimization, SEO, and server-side development is also essential

2. Books Recommended by Seniors That I Haven't Finished

1. "JavaScript Patterns"

2. "High Performance JavaScript"

3. "JavaScript Framework Design"

4. "Inside jQuery"

5. "JavaScript Web Rich Application Development Based on MVC"

You need to understand the concept of JSMVC based on the above foundations. See how the author of this book constructs a JSMVC framework. To understand these things, you need to be familiar with the JS language and frameworks. If you want to study more deeply, use libraries like Backbone, Angular, and Ember, analyze their respective advantages, use them well, and decipher them; your architectural and language abilities will improve further.

6. Read Source Code

Try reading the source code of some JS libraries. Good recommendations include: backbone.js, lazyLoad.js, oz.js, sea.js, sizzle.js, underscore.js. Of course, you can also try reading the jQuery source code, though personally I don't highly recommend it as it's a bit difficult to digest. However, the aforementioned libraries have very clear descriptions of structure, JS techniques, and algorithms, making them excellent examples for learning JS source code.

7. Keep Coding

You must continuously write JS code; this is the only standard for improving coding ability. Reading books can give you knowledge, but actual coding gives you deep understanding. Ideally, you should write a library yourself: first, to make others feel good using your library, and second, to continuously improve your own coding level.

3. Other

To be continued