Special thanks to https://scotch.io/tutorials/create-a-single-page-app-with-go-echo-and-vue for resparking my interest for frontend development. It's been a while... :)
- VueJS still rocks! :-) (as in, it's by far the biggest "heard of, would like to learn" (kind of what Go used to be, still is maybe?) and the 2nd most used);
- Bootstrap is still no.1 but https://tailwindcss.com/ is a serious challenger;
- CSS Grid Layout is getting more traction as an alternative to Flexbox for layout.
The obligatory 10k feet view:
- https://hackernoon.com/a-map-to-modern-javascript-development-2017-16d9eb86309c
- https://stateofjs.com/
- https://www.webdesignerdepot.com/2017/04/the-state-of-front-end-tooling/
- https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711
- https://medium.freecodecamp.org/what-to-learn-in-2017-if-youre-a-frontend-developer-b6cfef46effd
- http://henriquea.github.io/blog/before-dive-into-react.html - not really about the state, still a very "to the point" summary of relevant things to master
Now if you feel like your head is exploding at the avalanche of frameworks, tools and technologies - this should help: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
Resources to come back to (over and over again) to learn things in depth:
- https://developer.mozilla.org
- https://platform.html5.org/
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
- http://cssreference.io/
- https://github.com/dexteryy/spellbook-of-modern-webdev
- https://github.com/FrontendMasters/front-end-handbook-2017
- https://github.com/grab/front-end-guide
- https://developers.google.com/web/
- https://developer.mozilla.org/bm/docs/Web/JavaScript
- https://babeljs.io/ - learning about the transpiler is a fast way to learn the differences between old and new JS
- https://github.com/lukehoban/es6features
- https://ponyfoo.com/articles/es6-modules-in-depth
- http://jsmodules.io/
- https://kangax.github.io/compat-table/es6/
- http://jamesknelson.com/grokking-es6-promises-the-four-functions-you-need-to-avoid-callback-hell/
To use static typing one may use either https://www.typescriptlang.org/ (a superset of JavaScript) or https://flow.org/ - a static type checker with optional type annotations.
- http://djcordhose.github.io/flow-vs-typescript/flow-typescript-2.html#/
- https://medium.freecodecamp.org/why-use-static-types-in-javascript-part-1-8382da1e0adb
- https://ecmascript-daily.github.io/pages/status-of-static-typing-in-ecmascript/
- https://esdiscuss.org/topic/es8-proposal-optional-static-typing
- https://vuejs.org/
- https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
- https://vuejsdevelopers.com/
- https://github.com/vuejs/awesome-vue
- https://www.hackerearth.com/blog/developers/javascript/reactjs-vs-vuejs/
There's also Angular and React of course, but Vue can be learned on one afternoon and used right away. Seems like a good place to start. For "batteries included" mode, see:
- http://cssreference.io/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3
- https://www.youtube.com/channel/UClKO7be7O9cUGL94PHnAeOA - Google Design channel, sort by popularity and start watching
- https://getbootstrap.com/
- https://bootstrap-vue.js.org/
- https://material.io/ - the theory
- https://getmdl.io/ - the library
- https://tutorialzine.com/2015/07/comparing-bootstrap-with-mdl - the showdown (make sure you check out the demo)
- https://vuematerial.io/
- https://medium.freecodecamp.org/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0
- https://frontendmasters.com/books/front-end-handbook/2017/learning/security.html
- https://storage.googleapis.com/google-code-attachments/browsersec/issue-8/comment-8/Google%20Browser%20Security%20Handbook.pdf
- https://securityheaders.io/
It's 2018, search engines not being able to crawl SPAs is long gone:
Get familiar with it, Node IS the ecosystem. NPM is what is used for packages management, node is what will run all the tools and toolchains, what will power local development, etc. Last but not least, Node implements ES6 out of the box, so code running on it does not even need transpiling (you can use it as a playground for learning ES6). Use recent versions of Node (8+) and NPM (5+) for best experience.
- https://nodejs.org/en/docs/es6/
- https://nodejs.org/api/modules.html - start here and learn about modules first, as they power the entire ecosystem
ESLint hands down. With eslint/recommended + plugin:vue/recommended it turns into a powerful learning "assistent". With the fix mode (and possibly in conjunction with https://github.com/prettier/prettier-eslint) it enables very convenient auto-formatting/auto-fixing according to the selected linting rules.
- https://webpack.js.org/
- https://leanpub.com/setting-up-es6/read
- https://github.com/vuejs-templates/webpack
- https://www.sitepoint.com/guide-to-npm-as-a-build-tool/
Forget about Grunt, Gulp or Bower. In fact the latter recommends webpack on their homepage :) As for NPM vs Yarn, in spite of all the outdated articles, npm now has https://docs.npmjs.com/files/package-locks
Briefly read good things about Jest, Karma and Mocha, will need to come back to this section.
TODO...
One should not (in 2017) accept anything less than:
- linting (as you type preferably)
- intellisense
- autoformat/autofix on save
- block level scoped "operations" (i.e. your editor will treat the html template in a .Vue file as html, the script as JavaScript, etc. and NOT treat the entire file as a single type);
Hint: VS Code checks all of those and more :)
The most used JS library by far, it deserve a honorable mention. And the mention is...
- http://youmightnotneedjquery.com/
- https://developer.telerik.com/featured/is-jquery-still-relevant/
- https://www.quora.com/Is-jQuery-dead-in-2017
If really needed, there's http://zeptojs.com/ a largely drop in (and far smaller) jQuery replacement, though if one needs imperative DOM manipulation in 2017, the better question is: why?