Javascript Course

[codyloyd]

This is the overview of our re-vamp of the existing Javascript(JS) course. At the moment it is in it's infancy so please feel free to leave suggestions in the comments such as:

• quality resources for a given topic.
• lessons or topics you think should be included in the course.
• ideas pertaining to the sequence of lessons
• projects for each lesson/topic
• Any general feedback (the more the better!)

Why this course is important.

Ruby and Rails are not dead or dying by any means, but the current trends in WebDev are increasingly focused on JS, and it looks like that trend is going to continue. Our curriculum does, of course have an entire JS unit, but being at the end of the whole curriculum it was put together rather hurriedly and some of it feels incomplete. In addition, many of the sections have become rather outdated since they were written almost 5 years ago. JS is changing, so our curriculum needs to as well.

It is conceivable that at some point in the future this JS course could actually shift to being the main focus of the curriculum rather than being secondary to the Ruby/Rails courses, so getting a good, solid foundation in this revamp is crucial.

Topics of Study (Units/Lessons for the course)

This is a rough outline of the course. Note that it does include the lessons that will eventually be included in WebDev101, so this course will be starting at ground-zero. We aren't quite to the point of planning individual lessons, so each of the points below could have one or more lessons and a project or two within them.

JS101:

• JS Basics
• DevTools (if it's not covered elsewhere)
• DOM Manipulation (plainJS)

Advanced JS

• AJAX/APIs
• Testing
• ES6
• Scope/Closures/Objects/this
• Call, Apply and Bind
• OOP in JS => prototypal inheritance
• Functional Programming Concepts

  Other Stuff

• JS + Rails
• Frameworks:
  • Node
  • Express
  • React

I suspect that at some point we will want an entire course based on JS frameworks (backend stuff like Node/Express and front-end stuff like React) so for now, the "frameworks" lesson will basically be a teaser with general info and links to the basic "hello world" tutorials for each framework.

The following is a compilation of links, ideas and potential projects to complete for each section. I'll try to keep it updated as you all comment and share ideas.

JS Basics

• for the most part, I think the existing WD101 JS section is adequate.. might need a little updating, but it's OK overall.
• should include lesson on running JS code (https://www.youtube.com/watch?v=t7t_5QT4mxg&)
• Resources:
  • primarily codecademy.
  • Eloquent JS is a highly recommended resource.. should at least mention it.
  • You Don't Know JS, "Up and Running" (the first book in the series) would be a good fit here as well.
• Projects:
  • Algorithm Scripting
  • we'll roll our own test suite as a git repo for students to clone and then complete. should mirror at least some of the ruby exercises.

    DOM Manipulation

• focusing on plainJS at first...
  • https://github.com/oneuijs/You-Dont-Need-jQuery
• Resources:
  • http://domenlightenment.com/
  • JS30?
• Projects:
  • need ideas ;)

    ajax/APIs

  • We can cover and use fetch or some other 3rd party module (axios is popular)
  • These don't show up in the current curriculum until way later.. but I propose that most modern WebDev relies quite heavily on the concept of APIs, and for some reason, they're considered to be a somewhat scary topic.
• We should also talk a bit about async here because AJAX methods are by definition going to be asyncronous.
• there are lots of good APIs we could tap into to use for this assignment, but we should probably pick a relatively simple one.. examples:
  • curated list of open APIs : HERE E)
  • Open Movie DB
  • Weather api: Darkskynet has a great api and their plans are free for small scale applications.
  • StockPicker: Quandl is great for beginners who want to use financial information.

    TDD in JS

• We should not assume that students will have had any exposure to TDD at all because they could be doing the JS only track.
• There are many Testing libraries out there, but I'm partial to tape so unless someone gives be a good reason to use something else (I'm open to it!!) that's what we'll go with. I prefer tape for it's simplicity.
• Projects can be anything really.. just focus on TDD.
• I presume these lessons will need to be written by us.

  ES6

  I am hoping that we will not have to cover too much here.. Presumably many of the syntax things and features will be covered in earlier lessons.. however there are a few little details that need covered, including a section on transpilers. things to cover include:

• Babel! (maybe we should write our own.. but this tutorial is pretty hip https://github.com/verekia/js-stack-from-scratch)
• Destructuring
• Promises
• Arrow Functions
• ??? probably something else I'm forgetting
• Probably don't need projects here.. students can just start working this stuff into their current work.

  Deeper JS topics

  Once the basic syntax is down, Rails-track people can bow out.... but for those wanting to stay the course, or to do the JS-only track, this is where it gets deeper. Topics to be covered include:

• Hoisting
• Scope & this
• Closures
• Callbacks
• Objects (in greater depth.. gearing up for OOP)
• https://www.youtube.com/watch?v=Bv_5Zv5c-Ts << this video covers a lot of that material

  OOP in JS

  JS DOES NOT HAVE CLASSES. This section is important.. crucial even.

• Prototypal Inheritance:
  • What/How
  • WHY.
  • Prototypes vs. Classes
• Projects may include anything.. will have to brainstorm on that.

  Functional JS

• FCC introduction to functional methods is good, if we haven't already covered it by this point.
• http://reactivex.io/learnrx/ <- awesome resource.
• Kyle Simpson book.
• F.Risby's book
• ??

Other stuff..

• this is a great article for express: https://zellwk.com/blog/crud-express-mongodb/

...remainder is in progress

[KevinMulhern]

for the most part, I think the existing WD101 JS section is adequate.. might need a little updating, but it's OK overall.

I think that breaking the basics out into separate lessons will make it higher quality and more accessible to more beginners. The js stuff in 101 is too much in one lesson imo.

FCC 'Basic Algorithm Scripting'

I'm not sure about this, ideally we would have exercises on site for the projects. Something they would perhaps have to do on their local machine.

[codyloyd]

goood point there.. perhaps we could roll a small test suite and create them ourselves like the test-first ruby stuff. Wouldn't be too hard... and would give the value of running locally.

[KevinMulhern]

I think thats the best solution 😄. We are going to do that with ruby basics too, so we should be able to reuse the same exercises for both courses.

[codyloyd]

there you go :D edited.

[OlegSliusar]

We can use some fCC's stuff for the JS course :thinking:

[KevinMulhern]

@OlehSliusar I think we could only use FCC for exercises and projects. FCC is brilliant but their in browser challenges is what puts me off. We want to get the student working from their local machine as quickly and as much as possible.

[ChadKreutzer]

@OlehSliusar I always recommend to people that they go through FCC's jQuery, Basic JavaScript, Object Oriented and Functional Programming, Basic Algorithm Scripting, JSON APIs and Ajax, Intermediate Algorithm Scripting, and Advanced Algorithm Scripting courses (skip the projects and just do the lessons) for a good grounding in Javascript and a decent intro to jQuery.

As @KevinMulhern says, their in browser editor isn't very real world, but neither is the Codecademy one. That isn't a big deal for the lessons, but where I take issue is having their students use Codepen for their projects. I think they have some good projects (heck, I basically stole the pomodoro clock one for our pairing course) but if you want to try them, use the real world development environment TOP has you set up.

[jacobherrington]

I agree with @KevinMulhern, as someone who has used FCC, The Odin Project, and Codecademy, one of the strengths of The Odin Project over the others is the opportunity to work locally and understand the technologies rather than just practicing syntax.

[libersolis-dev]

Might I recommend the first 3.5 hours of Understanding JavaScript the wired parts available for free on YouTube. I'm someone who was lost before I watched those videos , it made a tremendous difference to me as a new developer with no math background.

[libersolis-dev]

Though many people look down at this resource, something that helped me tremendously were these exercises http://www.asmarterwaytolearn.com/js/index-of-exercises.html and the book, more so the exercises than anything else.

It isn't perfect, but the way the questions are asked, the order they are asked in and the simplicity of it all makes it very easy to learn, apply and retain concepts. I struggled to find other resources like this.

One of the most frustrating things I have run into is the lack of practice problems to drill. Sites that have problems to solve usually focus on algorithmic/data structure type problems, instead of helping people develop language fluency.

[jansowinski]

Two insights from a perspective of someone learning JS right now:

• Vue.js could be the great choice for first framework. Although things are changing very fast here, vue is very easy to catch even for someone not experienced in JS and official documentation is written so well, that it's probably the best tutorial out there.
• This tutorial is really nice when it comes to getting familiar with all tooling used nowadays by JS developers. I think JS tooling stack is very confusing for all newcomers like me.

[KevinMulhern]

Thank you for offering offering your insights @mannyhagman and @iansowinski 😄

[Sandesh-bn]

@KevinMulhern, @codyloyd Hi I explored the Javascript course and I believe that students would greatly benefit from a lessons on Scope, Hoisting, IIFE, this keyword, preventExtensions, freezing and sealing, call, apply & bind. I would love to work on adding these to the existing curriculum. Nicholas Zakas is also well known name in Javascript community for authoring concise and skillfully worded Javascript books. We could add his books to the suggested reading list as well.

[codyloyd]

@Sandesh-bn several of these things are already on the list up there... but we GREATLY appreciate your input. for sure.

We aren't really intending to add things to the existing curriculum but re-write and refresh more or less from scratch.

we aren't quite to the point where we're ready to start the actual writing.. just planning at the moment. Take a look at the outline above and suggest where you think we should add whatever it is you think we're missing and I'll add it to the list.

[Sandesh-bn]

Deeper JS topics Hoisting IIFE preventExtension, freeze, seal methods. Call, Apply and Bind Exception Handling

Suggested Reading The Principles of Object-Oriented Javascript(Intermediate) Understanding ECMAScript 6(Intermediate) Professional Javascript(Advanced)

Ajax/APIs Weather api: Darkskynet has a great api and their plans are free for small scale applications. StockPicker: Quandl is great for beginners who want to use financial information.

[jansowinski]

Potential resources: the basics of package json in node js and npm

[mygeeklab]

Why not add Angular to the mix of js frameworks sunrise auntie end of the course, not only do we get knowledge on both, but also enable us to choose between the two based on which we get the most?

[codyloyd]

My personal opinion is that we should pick one to reduce bloat. Honestly, buy the time you get to this post of the curriculum you should be able to figure most of that stuff out on your own.

[jansowinski]

@codyloyd is right. At that point course should just introduce to ideas behind JS frameworks. For me Vue worked great thanks to it's simplicity, thats why I propose it (second argument is that it's getting more and more attention). After playing with Vue diving into react seems easier for me right now (although I'm just starting with it)

[codyloyd]

@Sandesh-bn thanks! I'm just getting back to this.. I'm adding a couple of those things, a couple of them I think will be implicitly discussed in other sections... and a couple I don't think are particularly relevant at this point.. but I really appreciate the feedback

Thanks!

[tomasvn]

May I suggest you to add https://watchandcode.com/ a practical JS course developed by Gordon Zhu?

[KevinMulhern]

Hey @tomasn4a, I've heard sooo many good things about that course. Thank you for suggesting it 😄

[tomasvn]

@KevinMulhern also a possible section dedicated for small JS projects, https://javascript30.com/ developed by Wes Bos

[KevinMulhern]

@tomasn4a ah another great one 😃

[ChadKreutzer]

lol. @codyloyd I was going to recommend https://zellwk.com/blog/crud-express-mongodb/ for helping with teaching express but you already had it. :)

[strongdan]

If it wasn't previously mentioned, I would suggest utilizing funfunfunction YouTube series on functional programming and higher order functions https://youtu.be/BMUiFMZr7vk

[JonathanYiv]

The current devtools resource is kind of ... meh. It requires you to download a glitchy chrome extension to complete the exercises.

I found this resource directly from google that better covers chrome dev tools.

[KevinMulhern]

Hey @JonathanYiv, is that the codeschool tutorial? I would agree that it isn't the best. How did you find the other assignments on that lesson?

[JonathanYiv]

Yes it is @KevinMulhern !

Codecademy was the best resource in my opinion. I felt the part which listed in-browser IDEs was useful but lacking.. substance(?). Project Euler was fun, although the complexity of the problems jumps up pretty quickly if you don't have strong math skills.

Aside from that, as mentioned in the original post at the top, it "should include lesson on running JS code (https://www.youtube.com/watch?v=t7t_5QT4mxg&)"

The current assignment just states "Solve these problem in repl.it if you aren't comfortable working with your own files" which I found was kind of dismissive. I installed node.js to run the files although I know you can also link to them in HTML files and open them in your browser. Maybe adding installation of node.js or something in the Installations Project would also help set the basis for the whole Javascript Course?

[KevinMulhern]

Sorry @JonathanYiv, looks like we've got our wires crossed 😄 I meant the other assignments on the dev tools lesson specifically. Although your feedback for the other lessons is very valuable so thank you for providing it 😄

[codyloyd]

This issue has been given it's own repo! Come visit at https://github.com/TheOdinProject/Javascript-Curriculum