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

• Archibald, Jake. ES modules in browsers. https://jakearchibald.com/2017/es-modules-in-browsers/
• Archibald, Jake. The offline cookbook. https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
• Archibald, Jake. The service worker lifecyle. https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle
• Biedelman, Eric. What is shadow DOM?. https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
• Biedelman, Eric. Custom elements v1. https://developers.google.com/web/fundamentals/getting-started/primers/customelements
• Biedelman, Eric. HTML imports. https://www.html5rocks.com/en/tutorials/webcomponents/imports/
• Biedelman, Eric. Html's new template tag. https://www.html5rocks.com/en/tutorials/webcomponents/template/
• Brubeck, Matt. https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html
• Burns, Peter. Encapsulated routing with elements. https://www.polymer-project.org/blog/routing
• Burns, Peter. Modular routing. https://www.youtube.com/watch?v=FbJQ4ghag_M
• Crockford, Douglas. The javascript trilogy. https://www.youtube.com/playlist?list=PL5586336C26BDB324
• CSS reflow demo. https://www.youtube.com/watch?v=ZTnIxIA5KGw
• CSS triggers. https://csstriggers.com/
• https://developers.google.com/web/fundamentals/performance/rail
• https://developers.google.com/web/progressive-web-apps/
• https://developers.google.com/web/tools/
• Dodson, Rob. Introduction to focus. https://developers.google.com/web/fundamentals/accessibility/focus/
• Dodson, Rob. Polymer 2.0 Under the hoods. https://www.youtube.com/watch?v=9vYJ8K6A_Kc
• Dutton, Sam. Progressive Web Apps Course. https://www.youtube.com/playlist?list=PLNYkxOF6rcIAdnzEsWkg0KpMn2WJwMBmN
• ES6 Language Specification. http://www.ecma-international.org/ecma-262/6.0/
• Garsiel, Tali. How browsers work internally? https://vimeo.com/44182484
• Gaunt, Matt. Service workers: an introduction. https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
• Gaunt, Matt. The webapp manifest. https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
• Gaunt, Matt. Intro to Gulp. https://www.youtube.com/watch?v=N42LQ2dLoA8
• Ginsberg, Wendy. Building Progressive Web Apps with Polymer. https://www.youtube.com/watch?v=fKsVXO3AztY
• Glazkov, Dimitri. What the heck is shadow DOM? https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
• Grigorik, Ilya. Introduction to HTTP/2. https://developers.google.com/web/fundamentals/performance/http2/
• Irish, Paul. https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
• Kearney, Meggin. Introduction to ARIA. https://developers.google.com/web/fundamentals/accessibility/semantics-aria/
• Kearney, Meggin. Introduction to semantics. https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/
• Kearney, Meggin. The accessibility tree. https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree
• Kitamura, Eiji. Introduction to HTML imports. https://www.webcomponents.org/community/articles/introduction-to-html-imports
• Kitamura, Eiji. Introduction to the template element. https://www.webcomponents.org/community/articles/introduction-to-template-element
• Kitamura, Eiji. Introduction to Shadow DOM. https://www.webcomponents.org/community/articles/introduction-to-shadow-dom
• Kitamura, Eiji. Introduction to Custom Elements. https://www.webcomponents.org/community/articles/introduction-to-custom-elements
• Kosaka, Mariko. https://medium.com/@kosamari/how-to-be-a-compiler-make-a-compiler-with-javascript-4a8a13d473b4
• Maynard, Travis. Getting started with Gulp. Packt publishing. 2015.
• Medley, Joseph. Web push notificaitons: timely, relevant, precise. https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/
• Moore, John. Getting organized with NPM and Bower. https://www.packtpub.com/books/content/getting-organized-npm-and-bower
• Mozilla Developer Network. https://developer.mozilla.org
• MVCSS. http://mvcss.io/
• Norton, Gray. Data flow in Polymer Elements and Apps. https://www.youtube.com/watch?v=pAW4YDLtPVs&t=1390s
• Osamani, Addy. The PRPL pattern. https://developers.google.com/web/fundamentals/performance/prpl-pattern/
• Osamani, Addy. The app shell model. https://developers.google.com/web/fundamentals/architecture/app-shell
• Osamani, Addy. Instant Loading with the App Shell Model. https://www.youtube.com/watch?v=QhUzmR8eZAo
• Page, Wilson. http://wilsonpage.co.uk/preventing-layout-thrashing/
• Pontelin, Teemu. State of Web Components and Polymer 2.0. https://www.youtube.com/watch?v=aZyt5K0HYVg
• Posnick, Jake. Service worker registration. https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/registration
• Polymer Project. https://www.polymer-project.org
• Polymer Project. https://github.com/Polymer/polymer
• Polymer Project. The PRPL pattern. https://www.polymer-project.org/2.0/toolbox/prpl
• Polymer Project. Routing. https://www.polymer-project.org/2.0/toolbox/routing
• Polymer Project. Layout. https://www.polymer-project.org/2.0/toolbox/app-layout
• Russel, Alex. Progressive Web Apps. https://www.youtube.com/watch?v=x7cfLDFVyHo
• Seddon, Ryan. So how do the browser actually renders a website? https://www.youtube.com/watch?v=SmE4OwHztCc
• Simpson, Kyle. You don’t know JS series. O’Reilly Media. 2015.
• Sturm, Gerwin. https://codingwithgerwin.blogspot.mx/2017/03/polymer-in-production.html
• Web APIs list. https://developer.mozilla.org/en-US/docs/Web/API
• Web components catalog. https://www.webcomponents.org/
• Webcomponents polyfills. https://www.webcomponents.org/polyfills/
• webcomponents.js polyfills. https://github.com/webcomponents/webcomponentsjs
• Walto, Philip. Web components and the future of modular CSS. https://philipwalton.github.io/talks/2015-10-26/
• Wiltzius, Tom. https://www.html5rocks.com/en/tutorials/speed/layers/
• Zachas, Nicholas. Understanding ECMAscript 6. No starch press. 2016.