Applied Internet Technology

What Class Is This Again?

Just to make sure you're in the right place:

• Special Topics - Applied Internet Technology (AIT)
• Someone started calling it AIT for short and that caught on 👍🏽
• Course Number CSCI-UA.0480, Section 008

What's it About?

Full Stack Web Development

This course is a practical, hands-on introduction to creating modern(ish) web applications. We'll cover (roughly in this order):

1. JavaScript (just learning the language itself)
2. Server Side Programming
3. Client Side Build-Out (HTML and CSS) and Programming
4. Maybe a Few Trendy Frameworks / Libraries
5. And We'll Pick up Some Development Tools Along the Way *

Let's Look at Some Specific Topics…

JavaScript Topics

• Basics (Types, Operators, Control Structures, etc.)
• Functional Programming (Functions as First Class Objects)
• Object Oriented Programming (Objects, Prototypes)
• Running (and Maybe Writing) Tests

Server Side Programming Topics

• Server Side Framework/Language - Node.js
• HTTP
• Web Framework - Express
• Authentication and Session Management
• Storing Data and Using a Database Abstraction Layer - MongoDB and Mongoose respectively
• Forms
• Building and Consuming APIs
• Deployment

Client Side Topics

Build-Out

• Quick Review - DOM/HTML5/CSS3
• CSS Layout
• Using JavaScript to Manipulate Styles
• Maybe Flexbox, Grids or SASS

Programming

• DOM Manipulation - Plain JavaScript, ES5/ES6 (we're not using JQuery)
• AJAX
• JavaScript Framework - React or vue.js

Development Tools Topics

• Version Control - Git
• Linter - ESLint
• Unit Testing Tools
• (Optionally) Debugger - Node Debugger, Inspector and Chrome Developer Tools
• (Maybe) Build Tools - Grunt, Gulp … or webpack?

Motivation for Technologies

Why use JavaScript, Node.js and Express over Ruby and Ruby on Rails or Python and Django?

1. only one language to learn throughout the course for server side development, front end development… and even database queries
2. straightforward to install entire stack (node, mongodb) on Windows, Linux and OSX
3. seems like a skill set that's currently sought after (former students are working with these technologies professionally!)
4. a fun stack to learn (really!)

The concepts and theory remain the same across this and other technology stacks, so what you learn here is applicable to Ruby, Python, etc. too!

Me?

Joe Versoza

• I think I know some of you / you know me from 0002 or 0101 (uh-oh … why would you want take another class with me?)!
• Clinical Assistant Professor (you can find me at: WWH 422)
• Before teaching full time
  • managed a bunch of programmers at a non profit
  • (turns out, managing programmers is not so fun 😭 😂 😐)
  • also worked as software engineer for a looong time - mostly with 🐍 (web.py and Django, and even some flask), but with some Rails, PHP, Java/JSP too…

About… You

I expect (hope?) that you:

1. are very comfortable using the commandline
2. have the ability to install tools, software, etc. … and troubleshoot installations (basically know how to use a computer )
3. are able navigate through your file system (both through a file explorer like Finder and through the commandline)
4. have basic/rudimentary knowledge of HTML and CSS (even a late 90's notion of how this stuff works may be fine)
5. actually do homework and - you know - occasionally come to class
6. (low bar, I know… but I mean it)

Also, a big (non-) expectation:

Only minimal experience with JavaScript, server-side web development, and modern front-end development

If You Already Know This Stuff

For example…

• if you do this professionally (seriously, I've had people who get paid to do this take this class??? 🤔)
• or… if you've already taken several web minor courses, including web programming and databases

What are you doing here? GET OUT! 👉

• Really, though, you probably won't get much out of the class
• And you'll slack off a bit
• (And then get like a B+, and then you'll try to argue with me about your grade, and I'll be like I told you not to take this class, and then we'll both be sad. The end.)

Workload

There's a significant amount of work involved in this class:

• 2 x exams (final is last day of class, not during finals week!)
• 8 or 9 x homeworks
  • Write your own code!
  • some examples of homework are:
    • write your own library that does x
    • use that library to implement some sort of web application
    • use an existing library that already does x to re-write above ^
• 8 x online quizzes (taken from home)
• 1 x final project
  • essentially, a single web app based on material we've learned
  • details to be posted mid-semester

Difficulty Level

This course is not challenging in the way that something like algorithms is, but it's challenging because of:

• the wide range of topics covered
• the volume of hands-on work (again, though, no more than weekly assignments in some intro classes)
• the difficult nature of debugging web applications that involve integrating several technologies

About that Homework

On the subject of homework and difficulty level, if you need help →

• please ask on piazza - public posts are encouraged as long as you're not posting significant parts of the homework solution
• high level discussions with other students are ok
• help debugging an exception/error from other students is ok
• see me or the tutor (office / tutoring hours)

Using online resources outside of the course materials…

• is ok if it's just a line or two and you annotate your code with a comment and a link … for example:
  • a snippet of example code directly from documentation
  • a couple of lines from stackoverflow to get a library working
• is not ok you're lifting significant amount of code from an online tutorial or another project found online

Writing Your Own Code

Whatever you do, though… write your own code! This means:

• don't copy (clone, download, etc.) anyone else's code 👯
• don't distribute/publish your code (including publishing to a public git repository or posting in a forum) 🚫
  • (You can publish your final project once the class is over)

The Director of Undergraduate Studies will handle any instances of cheating or software plagiarism

Oh Yes - Did You Remember the Part About Writing Your Own Code?

Too Easy/Difficult, Too Much Work?

Consider choosing a different course if 🤔 …

1. are a professional web developer or already know this stuff 😮
2. think this may be more work than you accommodate this semester 😰
3. not comfortable with the requirements (commandline, basic html, css, etc.) 😟
4. you're a senior and want an easy C to meet your cs major requirements 🎓

How to Make No One Happy

Students coming into the course have very different backgrounds when it comes to web development (from What's a CSS? to You mean this course doesn't go into using Redux?) →

• Sooo… I try to hit the middle ground
• for students with no previous experience, it's a: "Hard class for me (no previous exp to webdev) but is fair. There should be a prereq to this class not to let people like me take the class."
• and for students with web development experience: "General pace was good - could have maybe been a little faster."
• just can't make anyone happy 🙄 … though one comment was (a drawing of a cat)
• general consensus in evaluations (biased towards people who attend class) is: a lot of work, but very useful for learning

(this should probably be two courses, and maybe it will eventually be)

That Sounds Pretty Harsh/Boring

If you're concerned about the workload and the material… →

• I'm always available to help, especially on piazza…as well as office hours and by appointment
• We'll also have a tutor (I'll post a schedule by next week)

If you think it's going too slowly… (you're one of those professionals that are taking this class for some reason 🤓) →

• challenge yourself: if the assignment is to make a simple game…
• make your own library/framework (like your own version of immutable.js or rxjs) from scratch, and use it to write the game
• or… add features to make the game more complete - like… adding an undo move feature
• or… add support tooling like unit tests, linters, and other build tools
• or… actually deploy your projects

Additional Course Info

• Office Hours:
   12:45 - 2:15pm on Mondays and Tuesdays at WWH
• Office Hours Room: WWH 422
• Readings: pulled from multiple free online books and documentation
• Grading: weights for homework, exams, etc.

Required Software

Node.js (obvs)

1. Suggested install - use the package manager on your OS
   • OSX
     • install homebrew

     • brew install node

   • Linux (Specifically Debian/Ubuntu)

     • sudo apt-get install nodejs
       sudo apt-get install npm

2. Use the Node.js installer:
   • Windows, OSX, and Linux: see the downloads page on the Node.js site

This Site, These Slides

• you can find my courses at http://cs.nyu.edu/~jversoza/
• these slides were built with reveal.js for HTML/CSS slides
  • use arrow keys to navigate
  • (or click on arrow buttons)
• add a ?print-pdf to the end of the slide deck's url to see the one page version of the slides

If You Got Anything Out of These Slides

This 👇

• You're going to be writing a lot of JavaScript (be prepared for weekly assignments)
• I'm available for help! The best way to get in touch with me is piazza or in-person (ask the question in class - someone else probably has the same question or office hours / appointment)
• the 2nd exam is on the last day of class, NOT DURING FINALS WEEK
• If you're a graduating senior, make sure you do the work; I can't just hand out C's (also, are you really just trying to get a C?)!
• Write your own code for assignments!
• Do the readings / quizzes