advanced-js / syllabus

syllabus for the Advanced JavaScript class at NYU

layout	permalink
default	/

Advanced JavaScript syllabus

If you are a teacher or interested in the design of the course, see the meta document.

• Course: INFO1-CE9766, NYU SCPS
• Instructor: Aidan Feldman, [email protected]
• Need help?
  • 
    • It sends message digests to people who aren't active in the room, so feel free to ask a question even if no one's around.
  • Look through and create issues
  • Office Hours during Hacker Hours (see schedule)
  • Email for 1-on-1 help, or to set up a time to meet

Course Description

Learn best practices in JavaScript in this intensive, five-session course. Topics include data encapsulation, closures, binding, inheritance, and name spacing. Discover some of the lesser-known, yet useful, features of the language, such as how to debug JavaScript problems on different browsers and improve performance. Create interactive webpages using third-party JavaScript libraries.

Computers are provided in the lab, though you are encouraged to bring a laptop for in-class exercises.

Prerequisites

• INFO1-CE9755 - JavaScript (syllabus) or equivalent
• Understanding of variables, data types, control flow, and basic function usage in JavaScript
• Strong intermediate knowledge of HTML, and at least basics of CSS
• Basic jQuery knowledge (DOM interaction like adding/removing elements/classes, etc.)

These won't be enforced by the instructor, but you will be pretty lost without understanding those concepts. If you need a refresher, take a look at the Beginner Materials.

Course Overview

We will dive into the nuances of JavaScript, how prototypal inheritance compares to classical inheritance, and how this can be used to build dynamic and complex web applications. Modern tools like jQuery and BackboneJS will be discussed, but students will learn the building blocks of these frameworks and after this course be able to understand what is happening under the hood. The focus will be on development for browsers, though most applies to other systems like Node.js, Phonegap, etc. Topics covered include:

• Encapsulation, closures and scope
• Classical vs. prototypal inheritance
• The event loop
• AJAX and JSONP
  • local
  • remote (e.g. Foursquare)
• Creating MVC-style models (a'la Backbone.js) from scratch
• Test- and Pseudocode-Driven Development

Topics will be demonstrated through live-code examples/slides, available at advanced-js.github.io/deck. Additional exercises will completed in-class.

See this interview for more background.

Homework/Projects

All assignments are listed within the Course Outline.

Workflow

If you're using GitHub Desktop, these general instructions will help:

• https://guides.github.com/activities/forking/
• https://help.github.com/desktop/guides/contributing/

Enabling Edit->Automatically Sync after Committing is recommended. Here are the steps:

1. Fork the repository for the exercise/project (found under github.com/advanced-js).
2. Clone the repository to your computer.
3. Open the index.html file in a browser and open the Developer Tools.
4. Modify the files to complete your solution.
5. Refresh the index.html page to see the results, and repeat.
6. Make sure all of your code is committed.
7. Push/sync up to GitHub.
8. Create a pull request on the original repository. All assignments are due at the start of the following class, unless otherwise specified.
9. You can continue to push fixes and improvements until the close date (listed in Classes) – just add a comment in the pull request to let me know it's been updated.

When the pull request is created, you should see a message saying that "the Travis CI build is in progress" – this means that your solution is being automatically checked for syntax errors. If this "build" ends up failing (which will show a red "X"), click through the "details" link and scroll to the bottom to see what the errors were. Per the requirements below, please fix the issues and push up the changes.

Feedback will be given in the pull request, so please respond with your thoughts and questions! You are welcome to open the pull request early as a work-in-progress if you are stuck and want to ask a question. Note that your solution will also be live at http://USERNAME.github.io/EXERCISE.

Versions

For exercises with multiple Versions (V1, V2, etc.) listed in the README: these are intended as guidelines for how to complete the assignments in the smallest/simplest possible increments. You are expected to reach the highest Version for each assignment by the due date. See also: extra credit.

Requirements

These apply to real life, as well.

• Travis CI build should pass, which includes:
  • All HTML files should pass W3C Markup Validation.
  • All written JS should pass JSHint.
• Must apply "good programming style" learned in class
  • Functions should be "short" (see Sandi Metz's rules for developers).
  • Optimize for readability.
    • "Programs must be written for people to read, and only incidentally for machines to execute." -Harold Abelson
  • Avoid using anonymous callbacks within other functions, especially if the callback is more than one or two lines.
  • For projects, use Object-Oriented Programming.
• Any borrowed code must be properly annotated.

Extra Credit

Bonus points for:

• Automated tests
• Creativity (as long as requirements are fulfilled)
• Anything listed under BONUS in the README of the exercise.

Course Outline

Class 1

Are you new to front-end web development? Here's a secret: no one else really knows what they're doing either.

— Nicolas (@necolas) January 17, 2013

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

1. Introduction
   • Put name on sticky note on back of monitor
   • Discuss what the class is going to cover
   • Everyone introduce themselves
     • Name
     • What you "do"
     • What are your goals for the class?
     • What's something in JS (or technology) you worry that your peers understand but you don't?
2. Setup
   • How many people are comfortable with Git/GitHub?
   • Install GitHub Desktop
     • If you are comfortable with Git already, you can skip this.
   • Sign up for GitHub
3. GitHub workflow
   • Walk through workflow
   • Create pull request on students repository
4. Explain how slides work
5. Get through countdown_exercise slide
6. Talk through requirements

Homework

• Join the chat room.
• Set up your GitHub profile.
• Access NYU Classes page, where grades will be posted.
  • Documentation
• Read JavaScript Garden.
• Finish up and submit echo and countdown exercises.
• Complete blink exercise.

Class 2

1. Look at various approaches for countdown()
   • Show recursive solution
2. Developer Tools walkthrough
   • Elements (HTML)
   • Console (JS)
   • Scripts (JS)
3. Pair program to build Memory v1 (see pairing tips)
4. Cover OOP, though "oop_inheritance" slide
   • Encapsulation example
   • Look at Backbone.js Events

Homework

• Read Mozilla's Introduction to Object-Oriented Javascript
• OOP exercise, through V2
• Memory v2 (individual)

Class 3

1. Code review Memory
2. Get through oop_inheritance slide
3. Cover automated testing
   • Build up a test framework from scratch
   • Examples in QUnit
     • Simple
     • Classes
     • QUnit documentation
   • Other frameworks
4. Cover AJAX/CORS/JSONP (files)
   • Network tab in Developer Tools

Homework

• Read Google JavaScript Style Guide
• Complete OOP exercise through V4.
• Memory V3

Class 4

1. Finish slides
2. Getting Serious example
   • Quick intro to Backbone.js
     • Boilerplate
     • Click the Box example app
     • TDD?
3. Multiple async
   • Promises/jQuery.Deferred
   • Possibly show async library?

Homework

• Learn about AJAX
• Mashup
• Improve your previous assignments

Class 5

1. Present and code review Mashup projects
2. Possible topics (vote?):
   • Node.js
     • Server "Hello World" (from Node.js homepage)
       • HTTP module docs
     • HTTP requests
       • Status codes
       • Headers
     • CommonJS?
   • Regular Expressions
     • Convert live input from a text area, e.g.
       • Link Twitter handles
       • Substitute select words for emoji, using emoji-css
   • Object-Oriented design
   • Code Retreat – possible "problems":
     • Game of Life
     • Tic Tac Toe

Pairing Tips

• Three people is possible, but two works best
• Agree on an editor and environment that you're both comfortable with
• The person who's less experienced/comfortable should have more keyboard time
• Switch who's "driving" regularly
• Make sure to save the code and send it to both people

Resources

Required Reading

• Google JavaScript Style Guide
• JavaScript Garden
• Mozilla's Introduction to Object-Oriented Javascript
• What’s so great about JavaScript Promises?

Beginner Materials

This class assumes you are confident with this material, but in case you need a brush-up...

• Codecademy – JavaScript and jQuery
• Eloquent JavaScript by Marijn Haverbeke, Chapters 1-5
• Want to learn JavaScript in 2015?
• How jQuery Works
• see also – Other Lists

Recommended Reading

• Functional JavaScript by Michael Fogus
• Front-end Job Interview Questions by @darcyclarke (for testing yourself)
• JavaScript Best Practices
• JavaScript Patterns by @shichuan (thanks @iandrewfuchs)
• JavaScript Patterns by Stoyan Stephanov
• JavaScript Web Applications by Alex MacCaw
• JavaScript: The Good Parts by Douglas Crockford
• Learning Advanced JavaScript slides by John Resig
• Static Web Apps
• Test-Driven JavaScript Development by Christian Johansen
• The JavaScript Interpreter, Interpreted by Martha Girdler (video)

Specific Topics

• Classical Inheritance in JavaScript by Douglas Crockford
• Partial Application in JavaScript by Ben Alman (thanks @michaelBenin)
• HTML5 Rocks
• Learning JavaScript Design Patterns by Addy Osmani

Other Lists

• JS: The Right Way (an overview of the JS landscape)
• Code School
• Thoughtbot's Javascript Trail Map
• How To Learn JavaScript Properly
• Superhero.js
• Teach Yourself to Code

Tools

• code validation: JSLint / JSHint
• debugging:
  • Chrome Developer Tools
    • Official debugging tutorial
    • Tutorial: JavaScript Diagnosis
  • Firefox Developer Edition
• sharing code snippets: gist.github.com
• asking questions: Stack Overflow

GitHub

• Git and GitHub
  • Official GitHub Help
  • Recommended resources
• GitHub Pages
  • Official site
  • Thinkful guide

HTML/CSS/JS Sandboxes

• JS Bin (recommended)
• bl.ocks.org
• Cloud9
• CodePen
• JSFiddle
• Mozilla Thimble
• Plunker
• rawgithub.com

Frameworks

• Framework comparison: TodoMVC
• Testing

Reference

• Mozilla Developer Network and Learn JavaScript
• w3schools
• JavaScript: The Definitive Guide by David Flanagan
• Simplified JavaScript Jargon

More Examples

• map/reduce (in Underscore)

Grading

• Class Participation – 30%
• Homework – 70%

Statements on Plagiarism

SCPS

New York University takes plagiarism very seriously and regards it as a form of fraud. The definition of plagiarism that has been adopted by the School of Continuing and Professional Studies is as follows: "Plagiarism is presenting someone else's work as though it were one's own. More specifically, plagiarism is to present as one's own words quoted without quotation marks from another writer; a paraphrased passage from another writer’s work; or facts or ideas gathered, organized, and reported by someone else, orally and/or in writing. Since plagiarism is a matter of fact, not of the student's intention, it is crucial that acknowledgement of the sources be accurate and complete. Even where there is not a conscious intention to deceive, the failure to make appropriate acknowledgement constitutes plagiarism. Penalties for plagiarism range from failure for a paper or course to dismissal from the University.

Instructor

Reuse and building upon ideas or code are major parts of modern software development. As a professional programmer you will never write anything from scratch. This class is structured such that all solutions are public. You are encouraged to learn from the work of your peers. I won't hunt down people who are simply copying-and-pasting solutions, because without challenging themselves, they are simply wasting their time and money taking this class.

Please respect the terms of use and/or license of any code you find, and if you reimplement or duplicate an algorithm or code from elsewhere, credit the original source with an inline comment.

syllabus's Issues

hide all assertion statements in slides by default

maybe with a button to show them - don't want to give away the answers

use example filenames for slide URLs

this way, links won't be wrong if slides are rearranged or some are added

unify/clarify language around levels/versions

The terms are used interchangeably from one repository to another, and it's confusing about whether each level needs to be submitted separately or not, and which level students are expected to reach. Maybe "steps" is a better name?

increase focus on development best practices

including:

• How to organize large projects
  • File/class/module organization
  • Single entry point
• DOM interaction
• State
• Build tools
• Automated testing
• Templating

This seems at least as valuable as any any of the language-centered topics. A longer-term project may help with this, as well.

make sure students get emails about test failures

Currently, style checks are done through Travis => Grunt => JSHint, but Travis doesn't send any emails to people that aren't Collaborators on the repository, so students end up missing the feedback. Another CI tool may not have this same limitation.

Another option: Hound adds inline comments, which seems like a great way to start conversations if the students have questions, but

• It doesn't have support for HTML validation, though that may not be a huge deal for this class.
• This wouldn't help with automated test failures.
• It wouldn't allow the style config to be centralized via an NPM module, since it needs to be checked in to the repository.

namespaces

Reading ahead a bit and looking at the namespaces slide.

Are namespaces different than JS 'Class'-level function definitions? Should they also be capitalized?

Include link to JS Interpreter talk

...by @marthakelly, once it's posted.

http://guidebook.com/guide/5776/event/5687138/

scope of mashup project?

The project guidelines are very open ended. To give more structure, what kinds of principles do you want to see demonstrated?

For instance:
Can it be a simple 1 page html/css/js project that alters api data, and then displays it in a useful way?
Can it be some sort of non web javascript program sitting on a server that fires timed github commits like https://github.com/will ?
A modification of memory game to use an api to create the tile images?

If we are required to test, is it to test the AJAX/JSON/API part? Making sure we're using OOP? etc.

consider assignment around building a JS library

advantages over everyone building different versions of same thing:

• more reusable/staying power
• can share among classmates and solicit feedback
• can practice TDD
• arguably requires more creativity
• thinking more meta

issues:

• may require more planning on students' part (would need to start sooner in the class)
• hard to know what's not already available or useful, esp. if less experienced

make a small HW submission app

should:

• list assignments with due dates
• allow multiple submissions (revisions)
• track submissions by student
• check that all submissions pass validation

maybe there's something available already that does these things.

update course description

make sure to include something to the effect of

This class isn't about learning how to use any particular libraries... it's about understanding JavaScript well enough that you can look at the source of any library and understand how it works.

• update official listing

require that HW passes JSHint

Need some hint about the second HW

I am trying to rewrite the js code into object oriented. It bring me much trouble than I thought.

1 I thought Box should be one class and create some obvious box instance. Then I realized that the self construction function, We actually didn't have.

Our Js Memory code didn't have a initialize function. We just initial them as some Fixed HTML.

2 I thought, Then I may not need Box as an object. I changed the Panel as the Object, and added some function to Panel. the self construction will be restart the Game. And The Panel have some attributes, [colors, number of box...]

However, that seems not Object Oriented right? need some hints

Using Factories and prototype?

http://bonsaiden.github.io/JavaScript-Garden/#function.constructors

Are there general guidelines for when to use Factories, inheriting prototypes, classes, etc?

Are there some examples of when these differences start to matter?

Would working on an individual project vs working on a larger project with multiple people change how your usage choices?

provide more detailed instructions about how to submit assignments

...via GitHub Desktop. Draw from https://help.github.com/desktop/guides/contributing/.

how to test in this environment?

I'm not exactly sure how or what to test for the memory assignment. I'm pretty new to testing anyway, but the way I understand unit testing is that you isolate a bit of functionality (say, a function), give it some known inputs and test that it produced the expected output. In the case of our specific implementation of the memory problem, the inputs are user events (clicks) and the output is a change to the DOM (css or html manipulation). The best I can think of here is to test constructors to be sure they return the correct type of object, but beyond that I'm not sure what to test.

Modify example runner to be debugger-compatible

Need to do some experimenting.

publish to Pages after successful build

add slide for hasOwnProperty()

build on Travis

add slide on dot vs. square-bracket notation on objects

Consider including self-assessable outcomes for each class

A technique I find useful when designing curricula is to list the learning outcomes for a given lesson as a set of statements that a student could use for self-assessment.

Examples:

• "I can select and modify elements of the DOM from a browser console"
• "I can use the GitHub workflow to submit assignments"
• "I can explain and discuss how my code conforms to object-oriented design principles"

Whether or not these get used to develop formal assessments, they can provide ways for students to gauge their learning in more nuance than "I completed the assignment."

Note that these statements also lend themselves to a Likert scale, should you want to formalize any kind of survey or feedback report.

add more explicit project grading criteria

e.g.

• must apply OOP concepts covered in class
  • optional if a framework is used?
• must pass W3C HTML validation
• must pass JSHint
• functions may not be longer than X lines
• JS source files may not be longer than X lines
• ...

sign-up list for Fall 2014

Leave a ✋ in a comment or subscribe to this issue and I'll let you know when registration for the Fall 2014 term opens up. Tentatively looking like Thursday evenings 6-9pm in Sept/Oct.

Terminal git commands

Just a friendly reminder to share some resources on git commands using terminal :)

License and crediting question

I don't teach a JS course, however I loved the course structure. If I fork and reuse any part of it, which attribution, license and link back should I add?

create more detailed class outline

link to related resources for each concept, etc.

Add Student Evaluation and Feedback

Add student evaluation and feedback similar to Prof. Sam Sultan (but, ya know, with more modern-day code :) ):

http://oit.scps.nyu.edu/~sultans/other/evaluation.html

http://oit.scps.nyu.edu/~sultans/other/feedback.html

Maybe you can make it look fancy schmancy using D3.js or something.

Look into alternative presentation format

e.g. https://github.com/tmcw/mistakes (thanks @samuelhough)

will use some of this

Hi @afeld,

just got into here via the github education page. I'm designing a course in computational economics at Sciences Po Paris, and want to use github heavily. I will build on some of the things I'm seeing here. I will of course attribute that to you. I love the first lesson with the PR to register ones name! Maybe I can ping you nearer the time to find out how I'm supposed to run the add_students.rb script?
Anyway, thanks a ton for sharing this.

Florian

Why haven't you used Wiki to make the Course Outline?

How do I use Wiki in the alike situation teaching using GitHub?

Add pre-class evaluation questions

Come up with some questions or topics that people should understand to determine if the level of this class is appropriate for them.

Why haven't you used GitHub Classroom for assignments?

Thank you Prof. @afeld for sharing your course and its structure in a very easy-to-read, very easy-to-reuse form (you even took time and effort to write the "meta").

I'm planning to fork it for our next course https://struktur-data.github.io/syllabus/

Anyway I'm curious why you haven't use GitHub Classroom for the assignments? I'm aware that probably at that time GitHub Classrom wasn't even born yet or in immature stage. So for today, would you recommend using GitHub Classrom or whether you're aware of any pitfalls/difficulties etc. regarding GitHub Classroom usage (or non-usage)?

Thank you 👍

Have log() print objects as JSON

Namespace Assignment

Do we need to submit this assignment? Searching through my Chrome history to find that specific JSBin link...

Add GIF of blink() behavior

To eliminate any confusion about the expected behavior.

Consider adding a link to example project in course description

As a student, I'd like to see an example of the kind of app/website that I could build after completing this course. Maybe a canonical implementation of the mashup project?

switch to GitHub Pages for the syllabus

Not sure that I trust DocumentUp to update reliably.

http://documentup.com/jeromegn/documentup#gh-pages

add OOP exercise(s)

make sure that people are comfortable w/ it as early as possible

Accept feedback within this repository

In the past, I've sent out surveys, but this project by @benbalter made me realize I could accept anonymous feedback straight into this repository:

https://github.com/benbalter/comment-card

Keyboard navigation within slides

Would this be something worthwhile to spend some time implementing?

h and l keys? left and right? Thoughts?

cover Developer Tools

• How much to do in class vs. homework?
• How early should it be covered?
• What resources should be recommended, for JS debugging in particular?
  • Chrome
    • https://www.codeschool.com/courses/discover-devtools
    • https://developer.chrome.com/extensions/tut_debugging.html
  • Firebug
    • http://getfirebug.com/javascript
  • Firefox
    • https://developer.mozilla.org/en-US/docs/Tools
  • Safari Web Inspector
    • https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html