WebDev2Frontend.md

Web Dev 2: Frontend

Presenter: Kevin Pei

Target Audience:

• People with basic programming and web experience

Suggested Prerequisites:

• HTML & simple CSS
• Some programming knowledge & familiarity with OS (files, folders, simple cmd) is a bonus

Workshop Goals:

Frontend development is a huge field with no clear path. This workshop will aim to provide attendees with a general amount of theory such that they can learn more themselves afterwards.

Description:

This workshop will focus on three key ideas:

• How modern web technology fits together
• The Node.js ecosystem
• The CSS box model and flexbox

Content Breakdown:

• Evolution of the webpage pt. 1
  • What’s an HTTP request?
  • How does a hello world site work?
  • How does a login page work?
  • Where does the database sit? Do we even care?
  • What is CSS and JS?
  • How do assets like CSS, JS, and images get loaded?
• Evolution of the webpage pt. 2
  • Conception of CSS and JS libraries
    • jQuery
    • Bootstrap
  • How AJAX changed everything
    • JSON communication protocol
  • Early build systems
    • SCSS
    • CoffeeScript
• Evolution of the webpage pt. 3a
  • What in the world is a WebSocket
    • Need for realtime communication
  • Rise of serverless computing
    • Firebase
• Evolution of the webpage pt. 3b
  • The need for better practices
    • Data passing and code organization; websites have become full featured apps capable of doing incredible things
    • Why isn’t Twitter written in jQuery? Imagine changing your profile picture
  • Introduction to ES2015 and up
  • Rise of frontend JS frameworks like React and Angular
    • Browsers have lagged behind!
  • Modern build and bundling systems
    • Gulp
    • Webpack
• Overview of React and Angular
  • Basic setup
  • Functional component philosophy vs two-way databinding
  • Quick walkthrough of both
    • Flux architecture
    • Reactive RxJS
• Introduction to the CSS Box model and Flexbox: see here

Slides