/expert_web_development_course

A course I gave for advanced web developers.

Primary LanguageHTMLMIT LicenseMIT

Expert web development course

A course I gave for advanced web developers in Mexico City. The course has a focus on development with the web components standard, and understanding the browser as a modern development platform in par with iOS and Android. #useThePlatform

The course took place on August 2017.

Syllabus

  1. Ecmascript
    1. Basics
      1. Values and Types
      2. Operators
      3. Variables
      4. Comments
      5. Comparisons. Falsy and Truthy statements.
      6. Control statements
        1. Conditionals
        2. Loops
        3. Switch
      7. Strict mode
      8. Functions
      9. this identifier
      10. Prototypes
      11. Polyfilling and transpiling
    2. Scope and closures
      1. What is a scope?
      2. Lexical scope
      3. Function scope vs. block scope
      4. Hoisting
      5. Scope closure
    3. This and object prototypes
      1. What is this?
      2. How this is assigned
      3. Binding exceptions
      4. Lexical this
      5. ES Objects
        1. Property descriptors
        2. Getters and setters
      6. Prototypes
      7. Prototypical inheritance
      8. Behavior delegation
    4. ES6 Block bindings
    5. Strings and regular expressions
    6. ES6 functions
      1. Default parameters
      2. Arrow functions
    7. ES6 Object functionality
    8. Destructuring
      1. Object destructuring
      2. Array destructuring
    9. Sets and maps
      1. Set and Weakset
      2. Map and Weakmap
    10. Iterators and generators
    11. ES6 Classes
    12. ES6 Arrays
    13. Promises and asynchronous programming
    14. ES6 Modules
  2. Browser mechanics
    1. Engines (webkit, gecko, blink, spartan) / (nitro, spiderMonkey, v8, chakra)
    2. Critical rendering path
      1. DOM
      2. CSSOM
      3. Render tree
      4. Layout
      5. Paint
      6. Composite
    3. Platform
      1. DOM manipulation
      2. Events
      3. Networking
      4. Web APIs
    4. OS bindings
  3. Web components
    1. Template tag
      1. Previous client side templating techniques
      2. How to use an HTML template?
    2. Shadow DOM
      1. What is shadow DOM?
      2. Composition and slots
      3. Styling
      4. Manipulating slots with JS
      5. Event model
      6. Handling focus
    3. Custom elements
      1. Defining a new element
      2. Extending other elements
      3. Custom elements reactions
      4. Properties and attributes
      5. Element upgrades
      6. Styling
      7. Unknown elements vs. undefined elements
    4. HTML imports
      1. Basics
      2. Execution order
      3. Dependency management (de duping)
    5. Webcomponents.js
    6. Browser support
  4. Polymer
    1. Under the hoods
      1. Polymer 2.0
      2. Mixins, Elements and utils
      3. UI and application elements
    2. Custom elements
      1. Custom elements concepts
      2. Define an element
      3. Declare properties
    3. Shadow DOM and styling
      1. Shadow DOM concepts
      2. DOM templating
      3. Style shadow DOM
      4. Custom CSS properties
    4. Events
      1. Handle and fire events
      2. Gesture events
    5. Data system
      1. Data system concepts
      2. Work with object and array data
      3. Observers and computed properties
      4. Data binding
      5. Helper elements
    6. Polymer CLI
      1. Installation
      2. Commands
    7. Web component tester
      1. Mocha
      2. Chai
      3. Test fixture
    8. Polymer.json
      1. Entrypoint
      2. Shell
      3. Fragments
      4. Other configurations
  5. Development tools (package managers and linters)
    1. Gulp
      1. Gulpfile
      2. Tasks
      3. Watch
      4. Plugins
    2. Bower
      1. bower.json specification
    3. NPM
      1. package.json specification
    4. ESLint
    5. Lighthouse
    6. Pagespeed
  6. App architecture
    1. Feature detection (Modernizr)
    2. App shell
    3. App layout
      1. app-header-layout
      2. app-header
      3. app-drawer-layout
      4. app-drawer
      5. app-toolbar
      6. app-grid
    4. Routing
      1. app-route
      2. app-location
      3. iron-pages
    5. i18n
      1. app-localize-behavior
    6. PRPL
      1. Push
      2. Render
      3. Precache
      4. Lazy load
    7. Accessibility
      1. Focus and tabs
      2. Semantic markup
      3. Screen readers
      4. WAI-ARIA
      5. WCAG2
    8. MVCSS
      1. Styleguide
      2. Reset
      3. Helpers
      4. Config / Theme
      5. Base
      6. Tools
    9. Presentation, logic and data components
    10. Redux
      1. Three principles
      2. Actions
      3. Reducers
      4. Store
      5. Data flow
      6. Async actions
      7. Middleware
      8. PolymerRedux
    11. Analytics
      1. Google Analytics
      2. Custom events
      3. Custom dimensions
      4. Custom metrics
      5. Offline Analytics
    12. Performance
      1. RAIL
  7. Progressive webapps
    1. HTTPS
      1. TLS
      2. Certificates
    2. HTTP/2
      1. Server push
      2. Multiplex
      3. Header compression
    3. Service workers
      1. Life cycle
      2. Offline models (runtime caching)
      3. sw-precache
      4. sw-toolbox
    4. Webapp manifest
      1. Webapp manifest specification
      2. Start URL
      3. Custom icons
      4. Splash screen
      5. Launch style
      6. Theme color
    5. Push notifications
      1. How push works
      2. Subscribing a user
      3. Web push protocol
      4. Handling push events
      5. Common notification patterns
  8. Backend services
    1. Registrar
    2. DNS
    3. Firebase hosting
      1. Deploy
      2. Custom domains
      3. Hosting customization
    4. Firebase real time database
      1. Structure data
      2. Read / Write
      3. Database security rules
    5. Firebase Authentication
      1. Google auth
      2. Custom auth
      3. Anonymous auth
      4. User management
    6. Firebase Storage
      1. Upload, download and delete files
      2. Storage security rules
    7. PolymerFire
      1. firebase-app
      2. firebase-auth
      3. firebase-document
      4. firebase-query
    8. Cloud functions for firebase
      1. Database triggers
      2. Auth triggers
      3. Analytics triggers
      4. Storage triggers
      5. HTTP triggers
      6. pub/sub triggers
  9. Final project
    1. Trip advisor clone
    2. Instagram clone

Slides

https://docs.google.com/presentation/d/1wgIUHwkA42C1rImZmUWdXoIZptkrP3yrnQssHA70eqU/edit?usp=sharing

Literature