Modern Web Apps training

Some of the sessions for this course can be 100% remote

First created during Fall 2012, the Modern Web Apps training course is a very, very high value-added combo. Over 4 consecutive days, it lets you discover and practice, in a unified, cohesive context, a large array of skills and leading-edge technologies around JavaScript.

  • ES2015+ (incl. ES modules)
  • npm dependencies
  • React and its ecosystem
  • Redux
  • Webpack
  • Test-first development (TDD)
  • Offline-first
  • Client-side storage
  • Web Notifications
  • Build and static deployment

Goals

The Modern Web Apps training aims to empower trainees to:

  • Tame modern JS with ES2015+ (even on IE9)
  • Internalize what makes a modern webapp and what it can do
  • Work with a test-first development cycle
  • Write module, decoupled code that is easy to test
  • Write their project code so that it keeps complexity in check when scaling in size
  • Setup an instant dev feedback loop
  • Emphasize mobile-first and offline-first UX patterns and best practices
  • Make their webapps installable, edging ever close to native apps experience

Curriculum

  1. Setting up

    • Tooling: coding, linting, transpiling, building, testing, debugging
    • Setting up Hot Module Replacement
    • Presenting the app we're building
    • Presenting the starter kit we're building on
  2. Introducing React

    • Philosophy and core concepts
    • A first render
    • JSX ≠ HTML (or even XML)
    • First components
    • Actual DOM vs. Virtual DOM
    • React Dev Tools
  3. Creating a reusable component

    • Isolated development thanks to StoryBook
    • Function componants
    • PropTypes
    • Props’ default values
  4. Testing components

    • Automated tests: concepts and ecosystem
    • Taking maximum advantage of Jest
    • Choosing a set of React test utilities
    • Test-first or test-after?
    • Thoughtful use of snapshots
  5. Lists and conditions with React

    • Using .map
    • Why do we need the key technical prop?
    • Using && and ?:
    • Ignored nodes in JSX
  6. Hooks

    • Hooks principles
    • Hooks vs. classes
  7. Redux

    • Application state or local state?
    • Frequent issues when managing an application state
    • Philosophy and core concepts
    • Slice reducers vs. feature reducers
    • Writing slice reducers with a TDD / test-first approach
    • Composing slice reducers
    • Cleanly connecting the store to the React app
    • Redux Dev Tools and their incredible power
    • Time-travel debugging
  8. Events with React

    • How they differ from native DOM events
    • Performance and awesome DX: the best of both worlds
    • Various ways of defining an event handler
    • Avoiding superfluous re-renders
  9. Forms with React

    • Simplifying from HTML/DOM approaches, in a big way
    • Controlled vs. uncontrolled components
  10. Client-side routing

    • Principles
    • What router shall we use?
    • Defining the routes we need
    • Adding side-effects to routing using the useEffect hook
    • “Private” routes
  11. Local state with React

    • Principles
    • Actually grokking useState
    • Should we sync from props, and how to best go about it?
  12. Offline-first

    • Being online should be a progressive enhancement
    • Persisting data client-side and hydrating back from them
    • AppCache vs. ServiceWorker
    • Webpack plugins
    • Offline resilience for our API calls
    • Being able to load the app itself when offline
  13. Static deployments

    • 100% client-side apps
    • Static hosting services
    • Example: deploying to Netlify
  14. Progressive Web Apps

    • What even is a PWA?
    • Technical telltales
    • W3C App Manifests
    • Target platforms (mobile, tablet and desktop)
    • How to trigger an installation offer
    • Demo

Next sessions

(Unless otherwise stated, every session has 4+ seats still available, and is in French; you can naturally book custom dates for your company using the link further below.)

Pricing

You registerPer trainee
1 to 2 trainees€1,800 net
3 to 5 trainees€1,620 net
6+ trainees€1,440 net
Loyalty discount€1,530 net

Need an in-house / custom training?

For a bespoke training, tailored to your needs, either at your office, in ours or remotely, please describe your context and needs using the following link.

Usually, the core training cost for doing this training in-house, which is a flat fee for up to 10 trainees, is €12,000 net. For international sessions with fewer trainees, we can trim that down: talk to us!

Request my in-house / custom training

Intended audience and pre-requisites

The Modern Web Apps training targets first and foremost front-end web developers that have to tackle writing large, feature-rich, optimized webapps that should behave well on a wide range of devices (desktops, smartphones, tablets, kiosks…).**

A decent knowledge of JavaScript is mandatory; any front web dev already using JavaScript on a daily basis, ideally beyond just jQuery-based stuff, is likely comfortable enough.

However, trainees might want to “study up” ahead of time to make learning all of this easier once attending the training proper. Future trainees will likely benefit from browsing this list of quality contents Christophe compiled; an ES2015-specific list is also available.

As for other tech components of the front-end web dev world, a “standard” understanding of the client side is obviously expected: HTML and CSS, that is. No need to be an HTML5 or CSS3 master: even if we will use these, they’re not our core topic and therefore entail no particular requirement.

Finally, it is not necessary to have prior familiarity with unit or integration testing systems, nor with in-code documentation systems. If you have already worked with such tools (JUnit, Test::Unit, RSpec, Cucumber, Capybara, Selenium, etc.) all the better, it’ll only make these subjects easier for you. But we will review all the relevant concepts as we put them to practice.

Unless otherwise specified, predefined-dates, multi-client sessions are held in French, so attendees should be reasonably fluent. You are naturally welcome to book custom dates for your company using the link above.

Deliverables

When the training starts, trainees receive all the related slides and supporting material in a web-based format, so they can easily follow along.

Once the training is done, they also get an extremely content-rich debrief e-mail, a reference archive with all finalized codebases (fully annotated and tested), all related slides and various complementary resources.

Logistics

  • Sessions run 7hr a day, or 4hr12 a half-day, adding up to 14hr, 21hr or 28hr.
  • Full days run from 9:30 to 12:30 and 14:00 to 18:00, half-days run from 13:48 to 18:00.
  • (For or U.S. friends, that's 9:30a-12:30p / 2p-6p and 1:38p-6p Paris time, respectively.)
  • For custom dates booked specifically by your company, the schedule can be adjusted to better suit your needs. In particular, we can use half-days locked on reasonable hours in your timezone, e.g. 9a-12:30p EST or 8a-11:30a PST.
  • Every trainee uses their own laptop or workstation.
  • Training sessions range from 3 to 10 trainees.

You can find all the details and modalities of registration, payment, cancellation and refunding in our Terms of Sale, along with our Conduct Policy.


Our main venue, for multi-client trainings (click to zoom):

Trainers

Christophe Porteneuve

Christophe Porteneuve

Christophe has been doing professional web work since 1995. He co-created Europe’s first production JSP portal in 1999, moving to J2EE before going with Ruby, Rails and finally Node.js.

A best-selling author of“Bien développer pour le Web 2.0” (“Best practices for modern web development”) at Eyrolles, he also wrote the reference book “Prototype and script.aculo.us” at Pragmatic Programmers, articles in various online magazines (most notably the widely-acclaimed A List Apart), and speaks at a number of conferences big and small.

In France, Christophe enjoys a solid reputation of expertise in the areas of front-end web dev (most notably JavaScript), Node.js, Git and Rails.

Christophe is the founder and CTO of Delicious Insights.

Maxime Bréhin

Maxime Bréhin

With a Masters of Computer Science scored in 2006, Maxime slogged for 5 years through the marshes of Java/Subversion in the FinTech consulting sector…

After a year in Australia in 2009, he turned to much more palatable techs: Ruby, Rails and Git. He started working with Christophe in 2010, joining his R&D engineering team to design and implement an e-commerce solution.

He succeeded Christophe as CTO there in 2012, to join him again 3 years later at DI.

Maxime is an R&D engineer at Delicious Insights.