React PWA training

Curriculum

Setting up

• Tooling: coding, linting, transpiling, building, testing, debugging
• Create React App
• Setting up Hot Module Replacement
• Presenting the app we’re building
• Presenting the starter kit we’re building on

Introducing React

• 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

• Function componants
• PropTypes (if TypeScript: state-of-the-art function component typing)
• Props’ default values

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

Lists and conditions with React

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

Hooks

• Hooks principles
• Hooks vs. classes

Local state with React

• Principles
• Actually grokking useState
• Should we sync from props, and how to best go about it?

Redux and Redux Tookit

• 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

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

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

Static deployments

• 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
• Going in: installation, shortcuts, using Web Share

Testimonials

Trainer

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.

• LinkedIn
• Twitter @mbrehin
• GitHub mbrehin
• YouTube

Intended audience

The React PWA 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.

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. In practice you should:

• Know the fundamentals of HTML as described here
• Know the fundamentals of JavaScript: variables, data types, loops, functions, the language’s standard library at least as of ES3 (1999).
• Use of JS in production on 10+ diverse scenarios.

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.

Pre-requisites

There is no pre-requisite for this training course (as in, verifiably acquired knowledge, through degrees, certifications, tests, etc.).

Logistics

• Every session is held synchronously, “live,” including remote sessions. This is not about pre-recorded videos.
• We are currently not scheduling new multi-client in-room sessions before, at the earliest, April 1st, 2022.
• Comprehensive course material is provided, acting as a common thread. It usually includes numerous slides and starter codebases or repositories for every exercise and lab.
• Trainees can ask questions at any time.
• Sessions always alternate between theory and hands-on labs, in short intervals (5 minutes to 1 hour).
• Hands-on periods rely on real-world use-cases (which can be bootstrapped through starter codebases, Git repositories or online assignment labs).
• Hands-on periods may be completed individually or as sub-groups that may vary from one period to the next, to foster pair programming and collaboration.
• Remote sessions use a Zoom recurring meeting, accessible through a provided link using both the installed app and the pure-web, no-install client. They mostly use features such as video thumbnails, screensharing, chat, breakout rooms and possibly quizzes, annotations and whiteboards.

Deliverables & assessments

• Every session half-day requires attendance signing (paper sheet or digital tool). For remote sessions, should a trainee fail to submit their entire attendance sheet in due time, Zoom participant logs will be considered authoritative.
• At the beginning of every day’s first period, we run a “debrief”: during about half an hour, we help collectively resurface skills and knowledge first tackled on the previous day. This helps put everyone back “in the zone,”, consolidate learning and boost group dynamics.
• Throughout the course, assessment of skill acquisition is done through the successful completion of hands-on labs (exercises, mini-projects, labs, use cases, etc.). Interactive quizzes may supplement this. The trainer remains available for any question during hands-on periods.
• Should a trainee exhibit significant difficulty, the trainer may opt to provide one-to-one mentoring for a while using the trainee’s computer as a working base. This also applies to remote sessions using Zoom’s dedicated features (e.g. one-to-one / individual assistance).
• When the session ends, every trainee may request a completion certificate (or at least attendance certificate) and, for remote sessions financed by a French institutional entity, we issue a standardized completion certificate in order for financing to be able to proceed smoothly.
• Once the training is over, every trainee receives a link to an online “hot” feedback survey, so they can express, among other things, whether they feel they achieved the stated goals of the training (or believe these will be achieved in the short term).

During the session, trainees receive at the start of every period access to:

• all the related slides and supporting material in a web-based format, so they can easily follow along,
• the starter repository for the common-theme app developed throughout the course.

Once the training is done, they also get:

• an extremely content-rich debrief e-mail,
• a reference archive with all related slides, finalized codebase with full documentation and tests, and various complementary resources.

Acquired skills are assessed throughout the session, looking for successful completion of the development steps of the common-theme app and the successful execution of automated tests (both trainee-written and provided ones).

Hardware & software requirements

• Use a sufficiently powerful laptop, properly set up (in particular, having followed whatever training-specific setup guide might have been linked to in the summons e-mail or training’s web page).
• This laptop must be equipped with a webcam, microphone and audio output (preferrably using a headset or earphones, to avoid feedback).
• Use an internet access with a minimal bandwidth of 1Mbps both ways, with an ideal minimum of 5Mbps (test your bandwidth here)
• Be able to run Zoom, either as a regularly installed software, or through their 100% web-based client. You can verify your installed client works fine using this test.

• React PWA courses require some prior installation on your computer: instructions can be found here.

Registration & deadlines

Regardless of the modalities you’re looking for (single- or multi-client, in-room or remote), your initial request (for quotation or contract) should be made online from the training’s web page. You can find further up contract request links for every available multi-client session, a proposal request button for a single-client session, and for any other enquiry can use the contact button further below. Please favor our online forms as they speed up processing by avoiding numerous e-mail back-and-forths in order for us to get all your necessary information.

For multi-client, fixed-date sessions, we reply to quotation or contract requests within at most 2 business days (and usually within minutes). For single-client, custom sessions, we usually get back to you within 3 business days to fine-tune your requirements and create a bespoke offer.

The e-mails we send to provide quotations or contracts, as well as our online training pages, provide a link to an online survey prospective trainees can use for fit-for-needs assessment; this information should get to us ASAP, ideally before contract signing, so we can verify our training offer is a good match for the audience.

Summons are sent by e-mail no later than 7 days prior to the session, at which time a potential cancellation decision (usually because two few trainees registered) is made. If the session is guaranteed ahead of that deadline, we can send your summons earlier at your request.

For multi-client sessions, you can register online (requesting a contract and sending it back signed by e-mail) until the day before the session starts, provided the required amount of seats remain free. If you finalize your registration after the usual summons-sending deadline, your summons are sent immediately by e-mail.

However, when French nationals contractualize with us in their personal capacity, French law mandates a withdrawal period (10 calendar days for in-room sessions, 14 calendar days for online sessions). In order to allow such clients to register later than this, they are provided an opt-in choice in their contract request online form to waive their withdrawal rights if the schedule requires it.

For French client entities applying for third-party financing (e.g. OPCOs, Pôle Emploi, Regions, EU), it is imperative that financing agreements be sent to Delicious Insights no later than the last day of the training session. Should financing be denied or only partially provisioned, the client is liable for payment of the balance of the fee.

You can find more information on the details of registration, cancelling and getting refunds in our Terms of Sale.

Disabilities & special needs

The French law dated September 5, 2018 for “freedom to choose one’s professional future” aims to facilitate accessing and retaining a job for people with disabilities or special needs.

Delicious Insights is very keen to help everyone, regardless of their particulars, move forward professionally.

We can often adapt the modalities of our trainings to fit your needs: let’s just review your situation together.

Do feel free to get in touch with our point person for Disabilities, Christophe Porteneuve, by e-mail or phone.

Do feel free to get in touch with our point person for Disabilities, Christophe Porteneuve, by e-mail at handicap@delicious-insights.com or phone at +33 662 059 656.