Capgemini

My web app
is better
than yours!

Bartek Pietrowski

You want to follow the slides?


                    import { SeniorSoftwareEngineer } from 'Capgemini';
                    const Bartek = SeniorSoftwareEngineer({
                        age: 30,
                        exp: [
                            'React',
                            'Angular',
                            'SSR',
                            'node.js',
                            'Java',
                            'Spring',
                        ],
                        interests: [
                            'pwa','amp',
                            'universal','web',
                            'functional', 'reactive',
                            'performance', 'clean-code',
                        ],
                        trainer: true,
                    });
                    export const software = Bartek.code({quality: 'good'});

What makes your app stand out?

  • UX
  • Performance
  • Quality
  • Tools

User interface
is like a joke.

If you have to explain it,
it is not that good...
; )

I am not a designer, but

Mobile changes
...
everything

Mobile audience growth

mobile audience growth

... and sth more recent

sample audience

Applications
for the Entire World

challenging areas

Why WEB?

  • Native apps size - 10x-100x higher
  • PWA offline capabilities without a need to install
  • Always up to date
  • New APIs, pages can adapt to device and network conditions

Fast
by default!

What
impacts
loading?

  • The network
  • Parsing javascript
  • Parsing css
  • Images
  • Third party code
  • Parser blocking patterns
  • Disk IO
  • Cache eviction
  • IPC jank
  • RTTs
  • Thermal throttling
  • ...
Networks, CPUs and disks all hate you.
On the client you pay for what you send in ways you can't easily see.
Alex Russell, Chrome

2017 best practices for loading

  • Compress diligently (GZip, Brotli)
  • Cache effectively (HTTP, service workers)
  • Minify and optimize
  • Preresolve DNS for critical resources
  • Preload critical resources
  • Respect data plans
  • Stream HTML responses
  • Make fewer HTTP requests
  • Have a font loading strategy
  • Send less JS (code splitting)
  • Lazy load non-critical resources
  • Route based chunking
  • Library sharding
  • PRPL pattern
  • Tree shaking (Webpack, RollUp)
  • Serve ES 2015 for modern browsers (babe-preset-env)
  • Scope hoisting (Webpack)
  • Don`t ship dev code to production

SSR vs. progressive

  • SPA vs SEO - Google executes JS! (but ...)
  • Best perceived performance
  • Uncanny valley
  • Server Side Includes
  • Cache utilization

We all <3 ES6

but do we ship it?


                <!-- Browsers with ES module support load this file. -->
                <script type="module" src="main.mjs"></script>
                
                <!-- Older browsers load this file (and module-supporting -->
                <!-- browsers know *not* to load this file). -->
                <script nomodule src="main.es5.js"></script>

-> Deploying ES6+ Code in Production Today <-

User perception

RAIL

  • Response
  • Animation
  • Idle
  • Load

User happiness metrics

  • First paint
  • First Contentful Paint
  • First Meaningful paint
  • Time to interactive

User happiness metrics - BBC

User happiness metrics - CNN

User happiness metrics - WELT

The cost of

[read more]

'300KB of JS' !== '300KB of image'

[read more]

Can you afford it?

Time to interactive budget
[read more]

Take
a look
around!

Test against average device

Web page test

HTTP archive

RUM (Real User Metrics)

Chrome UX report

Tools

Q & A