Modern Solutions

Transcript

1. Modern Solutions Deploy Bel Curcio - curcio.be - @okbel
2. Director of Solutions Bel Curcio / Vercel
4. 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
5. 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
6. 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
7. 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 
 🧬
8. 2004 Microsoft Frontpage and Dreamweaver vBulletin CPanel/Fantastico Shockwave/Flash LAMP 
 🧬
9. WYSIWYG Editors HTML ???? CSS Server DX Static Files Save As … 2004 Web Development
10. WYSIWYG Editors HTML Flash CSS Server DX Static Files Save As … SPA 2004 Web Development
11. WYSIWYG Editors HTML JS CSS Server DX Static Files Save As … FTP 2004 Web Development
12. The Web from the WebMaster’s Perspective.
13. The Web from the WebMaster’s Perspective.
14. 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
15. WYSIWYG Editors Server DX HTML JS CSS Static Files Save As … FTP 2004 Web Development
16. HTML JS CSS Static Files Full Server Implementation Public Folder DB CMS
17. Server Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS
18. 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
19. UI Data Functional Model of a Web App
20. UI Data Transformations Static Representation + Interactivity fn ()
21. UI Data Transformations Static Representation + Interactivity This is Jamstack* fn (app state/data)
22. Jamstack APIs Markup JS CDN Ready
23. Jamstack Microservices (Serverless Functions) Markup JS CDN Ready
24. 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
25. Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS Jamstack APIs Markup JS CDN Ready ?
26. Traditional Web Standard Model Web Server Web Server DB CMS API HTML JS CSS Jamstack APIs Markup JS CDN Ready Hybrid
27. Hybrid Model Secure Available Up-to-Date Performant Fast
28. Hybrid Frameworks
29. No silver bullets We have a work f low.
30. Solutions Team
31. 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
32. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
33. Focus on the customer Solutions Team Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
34. Cover it all. Analysis • Industry - Retail, News and Media, Financial • Audience - Segmented Audience • Product - Product considerations and technical aspects.
35. 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.
36. 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
37. Rendering Strategy By understanding our customer's Audience and Industry, we can predict the rendering strategy.
38. Detailed product consideration and its technical aspects. Analysis/ Product • Technical Considerations • Single Page Application (SPA) • Multi-Page Application • Multi-tenant Application • Microfrontend Application
39. Focus on the customer Solutions Team Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
40. What is fast? Solutions • Real Performance • Perception of Performance / Performance
41. 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
42. 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
43. • 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
44. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵 Deploy
45. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵 Iterate Deploy
46. Don’t be the team that focuses too much on the brick. Be the team that builds the best house (or bridge).
47. Focus on reality Let problems guide you. Work on real case scenarios. (And some edge cases)
48. Stay on track The ecosystem is constantly changing.
49. The Web is Complex Enjoy it.