Modern Web Apps training
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
- 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
- Philosophy and core concepts
- A first render
- JSX ≠ HTML (or even XML)
- First components
- Actual DOM vs. Virtual DOM
- React Dev Tools
Creating a reusable component
- Isolated development thanks to StoryBook
- Function componants
- Props’ default values
- 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
Lists and conditions with React
- Why do we need the
- Ignored nodes in JSX
- Hooks principles
- Hooks vs. classes
- 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
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
Forms with React
- Simplifying from HTML/DOM approaches, in a big way
- Controlled vs. uncontrolled components
- What router shall we use?
- Defining the routes we need
- Adding side-effects to routing using the
- “Private” routes
Local state with React
- Actually grokking
- Should we sync from props, and how to best go about it?
- 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
- 100% client-side apps
- Static hosting services
- Example: deploying to Netlify
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
- 25—28 May 2021 100% remote
Request a training contract 25—28 May 2021 100% remote
- 22—25 June 2021 100% remote
Request a training contract 22—25 June 2021 100% remote
(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.)
|You register||Per 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…).**
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.
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.
- 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.
Our main venue, for multi-client trainings (click to zoom):
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.
Christophe is the founder and CTO of Delicious Insights.
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.