Slide 1

Slide 1 text

Modern Solutions Deploy Bel Curcio - curcio.be - @okbel

Slide 2

Slide 2 text

Director of Solutions Bel Curcio / Vercel

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What to expect from this talk. • Background and Introduction • Overview of Modern Web Applications • What’s a Solutions Team? • Solutions Team Playbook and Work f low • Some techniques to build resilient Web Applications

Slide 5

Slide 5 text

Director of Solutions • Software Engineer / Earlysquad.com - FoundMyFitness, OpenZeppelin, Pagina12 • Lead Frontend Engineer / Mozilla - Coral Project, adq. Vox Media • OSD - Software Engineer / R/GA - J&J, PwC, Equinox, RGA.com, Nike, McCormick & More • Software Engineer / PFA - Healthcare / Security Systems Bel Curcio PFA 2011 R/GA 2014 Mozilla 2016 Vercel Now / Vercel

Slide 6

Slide 6 text

Director of Solutions Bel Curcio / Vercel PFA 2011 jQuery/Mootools PHP ROR Java Oracle/PLSQL R/GA 2014 Backbone Underscore Templates Meteor MEAN Stack ASP.NET (SiteCore) Drupal / Wordpress Mozilla 2016 React GraphQL Apollo/Relay Vercel Now Next.js Nuxt Svelte + Microservices and Headless

Slide 7

Slide 7 text

PFA 2011 jQuery/Mootools PHP ROR Java Oracle/PLSQL R/GA 2014 Backbone Underscore Templates Meteor MEAN Stack ASP.NET (SiteCore) Drupal / Wordpress Mozilla 2016 React GraphQL Apollo/Relay Vercel Now Next.js Nuxt Svelte + Microservices and Headless 2004 Microsoft Frontpage and Dreamweaver vBulletin CPanel/Fantastico Shockwave/Flash LAMP 
 🧬

Slide 8

Slide 8 text

2004 Microsoft Frontpage and Dreamweaver vBulletin CPanel/Fantastico Shockwave/Flash LAMP 
 🧬

Slide 9

Slide 9 text

WYSIWYG Editors HTML ???? CSS Server DX Static Files Save As … 2004 Web Development

Slide 10

Slide 10 text

WYSIWYG Editors HTML Flash CSS Server DX Static Files Save As … SPA 2004 Web Development

Slide 11

Slide 11 text

WYSIWYG Editors HTML JS CSS Server DX Static Files Save As … FTP 2004 Web Development

Slide 12

Slide 12 text

The Web from the WebMaster’s Perspective.

Slide 13

Slide 13 text

The Web from the WebMaster’s Perspective.

Slide 14

Slide 14 text

2004 Web Development • Apps were limiting • Multipage was hard to maintain • No focus on the user • The DX was incredible • Deploys were instant • Small by default • Full ownership

Slide 15

Slide 15 text

WYSIWYG Editors Server DX HTML JS CSS Static Files Save As … FTP 2004 Web Development

Slide 16

Slide 16 text

HTML JS CSS Static Files Full Server Implementation Public Folder DB CMS

Slide 17

Slide 17 text

Server Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS

Slide 18

Slide 18 text

Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS • SPoF • No separation of Concerns • CDN (not) ready • Hard to scale • Costly, idle • Longer deploys, delaying time-to-prod • Challenging testing • Impure implementation

Slide 19

Slide 19 text

UI Data Functional Model of a Web App

Slide 20

Slide 20 text

UI Data Transformations Static Representation + Interactivity fn ()

Slide 21

Slide 21 text

UI Data Transformations Static Representation + Interactivity This is Jamstack* fn (app state/data)

Slide 22

Slide 22 text

Jamstack APIs Markup JS CDN Ready

Slide 23

Slide 23 text

Jamstack Microservices (Serverless Functions) Markup JS CDN Ready

Slide 24

Slide 24 text

Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS Jamstack APIs & Microservices Markup JS CDN Ready Overview of web architectures

Slide 25

Slide 25 text

Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS Jamstack APIs Markup JS CDN Ready ?

Slide 26

Slide 26 text

Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS Jamstack APIs Markup JS CDN Ready Hybrid

Slide 27

Slide 27 text

Hybrid Model Secure Available Up-to-Date Performant Fast

Slide 28

Slide 28 text

Hybrid Frameworks

Slide 29

Slide 29 text

No silver bullets We have a work f low.

Slide 30

Slide 30 text

Solutions Team

Slide 31

Slide 31 text

Solution Team Tasks • Help customers deliver rich web experiences • Improve Web Metrics • Decrease technical debt and shorten time-to-production. • Create Demos and PoCs • Explore complex cases of Web applications at scale. • Code Audits

Slide 32

Slide 32 text

Solutions Team Focus on the customer Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵

Slide 33

Slide 33 text

Focus on the customer Solutions Team Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵

Slide 34

Slide 34 text

Cover it all. Analysis • Industry - Retail, News and Media, Financial • Audience - Segmented Audience • Product - Product considerations and technical aspects.

Slide 35

Slide 35 text

Each industry is di ff erent. Solutions vary per industries. Analysis/ Industry • Retail - Seasonal, Cyber Monday, Black Friday, Valentines Day • News&Media - Elections, Breaking news, Reader-to-Subscriber, Ads, Paywalls, Engagement • Financial - Real-time, Black-Swans, IPOs, GamesStop, Robinhood • Travel - Pricing strategies, booking f low, personalized and relevant experiences, recommendations.

Slide 36

Slide 36 text

The Audience dictates your product (and tech considerations). Analysis/ Audience • Retail • Low tolerance on price & stock changes • News & Media • Engagement through community • Ads, Paywalls, Bots • Financial • No UX queues • Real-time and optimistic updates • Target and Segmentation • From which part of the globe you get most of your visitors? • Devices

Slide 37

Slide 37 text

Rendering Strategy By understanding our customer's Audience and Industry, we can predict the rendering strategy.

Slide 38

Slide 38 text

Detailed product consideration and its technical aspects. Analysis/ Product • Technical Considerations • Single Page Application (SPA) • Multi-Page Application • Multi-tenant Application • Microfrontend Application

Slide 39

Slide 39 text

Focus on the customer Solutions Team Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵

Slide 40

Slide 40 text

What is fast? Solutions • Real Performance • Perception of Performance / Performance

Slide 41

Slide 41 text

What is fast? Solutions • Check 3rd Party Tags - Ads and trackers • Focus on Core Web Vitals - Mostly on Time to Interactive • Lazy-load based on User Interaction • Check for usage of CPU - Avoid unnecessary re-renders. Debug. • Don’t ship to the client what the client won’t use. Don’t abuse this power. • Analyze your JS - Bloated JS. • Images and Webfonts / Performance

Slide 42

Slide 42 text

Solutions • External APIs & Microservices • Headless Providers • Databases • Monitoring and Logging • Caching Strategies / Architecture Ready to go. Starters, PoCs and recipes. • https://next-store-pi.vercel.app/ • https://next-edu.vercel.app/ • https://next-microfrontend-app.vercel.app/ • https://next-new-blogger.vercel.app/posts/student-solves-knot-problem (3.1k GH Stars) PoCs & Recipes Next.js Commerce

Slide 43

Slide 43 text

• Commit to a certain level of performance • Build a progressive loading experience - Not all your users will experiment your web the same way. • Use Feature Flags - Don’t blow up in prod and ship a lot. • Build Incrementally - Plan your rendering strategy. • Use Tools - Let the tools work for you and with you. Not against you. • Make yourself independent - Set it up to be restarted everywhere in no time. • Build resiliency - e.g Default to another source of data Solutions / Good Practices

Slide 44

Slide 44 text

Solutions Team Focus on the customer Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵 Deploy

Slide 45

Slide 45 text

Solutions Team Focus on the customer Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵 Iterate Deploy

Slide 46

Slide 46 text

Don’t be the team that focuses too much on the brick. Be the team that builds the best house (or bridge).

Slide 47

Slide 47 text

Focus on reality Let problems guide you. Work on real case scenarios. (And some edge cases)

Slide 48

Slide 48 text

Stay on track The ecosystem is constantly changing.

Slide 49

Slide 49 text

The Web is Complex Enjoy it.