Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Solutions

Modern Solutions

Belén Curcio

March 03, 2021
Tweet

More Decks by Belén Curcio

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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 
 🧬
  5. 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
  6. 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
  7. 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
  8. Traditional Web Standard Model Web Server Web Server DB CMS

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

    API HTML JS CSS Jamstack APIs Markup JS CDN Ready Hybrid
  10. 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
  11. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry

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

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
  13. Cover it all. Analysis • Industry - Retail, News and

    Media, Financial • Audience - Segmented Audience • Product - Product considerations and technical aspects.
  14. 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.
  15. 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
  16. Detailed product consideration and its technical aspects. Analysis/ Product •

    Technical Considerations • Single Page Application (SPA) • Multi-Page Application • Multi-tenant Application • Microfrontend Application
  17. Focus on the customer Solutions Team Solutions Analysis Perfomance Industry

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
  18. 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
  19. 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
  20. • 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
  21. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry

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

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵 Iterate Deploy
  23. Don’t be the team that focuses too much on the

    brick. Be the team that builds the best house (or bridge).
  24. Focus on reality Let problems guide you. Work on real

    case scenarios. (And some edge cases)