Skip to content

Latest commit

 

History

History
254 lines (177 loc) · 9.63 KB

README.md

File metadata and controls

254 lines (177 loc) · 9.63 KB
Raw

everything burrito what it feels like to learn js

learning js

this is a syllabus of everything i either used or didnt use to learn front end js to a decent level. it's based on a hellish trello board i kept that rapidly grew out of my control.

i've rated everything from 1-5 burritos (🌯) depending on the skill level required to understand the concepts. i've also treated ES2015 as something that should be used from the start, rather than a separate section.

contents

  1. the basics
  2. in-built methods & objects
  3. intermediate js concepts
    1. passing by value/reference
    2. recursive functions
    3. callbacks
    4. the event loop
  4. dom & events (aka makin' websites)
    1. dom
    2. events
  5. advanced js concepts 4. this 5. prototypes 6. closures 8. namespacing & modules
  6. object oriented js + mvc
  7. tdd
  8. node.js & npm
  9. common.js & amd
  10. gulp & webpack
  11. design patterns
  12. functional js
  13. react & redux

1. the basics

// the different data types, how they're written, and how they work.
// - values (booleans, numbers, strings)
// - operators
// - other values (null, undefined, NaN)
// - arrays
// - functions
// - objects
// - control flow (if, else if, else)
// - loops (for, while, do-while)

2. in-built methods & objects

// the most useful/interesting ones:
// - number - isNan, toFixed
// - string - split, join, toLowerCase, toUpperCase, indexOf, search, match, replace, repeat
// - array - pop/push/shift/unshift, forEach, map, filter, reduce, sort, concat, every, some, from (loads!)
// - object - hasOwnProperty, Object.create, Object.assign, Object.keys
// - function - apply, call, bind
// - regexp, math + date

3. intermediate js concepts

  1. passing by value/reference

  2. recursive functions

  3. callbacks

  4. the event loop

4. dom & events (aka makin' websites)

  1. dom
  2. events

5. advanced js concepts

// i recommend reading the entirety of You Don't Know JS (YDKJS) by Kyle Simpson if you can
// the full book is online: https://github.com/getify/You-Dont-Know-JS
  1. this
  2. prototypes & inheritance
  3. closures
  4. namespacing & modules

6. object oriented js + mvc

7. tdd

8. node.js & npm

// the only things you'll really need to know about npm are that it's where modules other people have
// written are stored and you can install them on your computer like this:

npm i dependency-name

// to install locally in your project, do:

npm i -D dependency-name

// learning node at at least some level is good, even if you don't plan to use it. it'll help you understand
// npm, modules and web tooling a bit better

9. commonjs & amd

// tldr: both are ways to load modules.

// amd (see require.js) is ugly as hell, but asynchronous

	define([moduleToImport], function () {
	  return somethingToExport
	});

// commonjs (used by node.js) is synchronous as hell, but pretty

	require('./moduleToImport');
	exports.thing = somethingToExport;

// but you should use es2015 modules anyway

	import {module} from 'moduleToImport';
	export somethingToExport;

10. gulp & webpack

// i learned gulp first, which i thought was useful (and fun! i recommend it!). but then i learned webpack and it is
// a great replacement for gulp. you should definitely learn webpack.

gulp

webpack

11. design patterns

// MVC, OOJS and modules are actually design patterns that help keep your code maintainable.
// some other key design patterns to learn are:

// - getters & setters
// - singleton
// - pub-sub / observer
// - mixin
// - factory
// - decorator

// the resources below individually cover all of these

12. functional js

  • currying
  • monads

13. react & redux