Modern Solutions

Transcript

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

   View Slide

2. Director of Solutions
   Bel Curcio
   / Vercel
   

   View Slide

3. View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   
   
   

   🧬
   

   View Slide

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

   🧬
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. The Web from the WebMaster’s Perspective.
    

    View Slide

13. The Web from the WebMaster’s Perspective.
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

19. UI Data
    Functional Model of a Web App
    

    View Slide

20. UI Data
    Transformations
    Static
    Representation
    + Interactivity
    fn ()
    

    View Slide

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

    View Slide

22. Jamstack
    APIs
    Markup JS
    CDN Ready
    

    View Slide

23. Jamstack
    Microservices
    
    
    (Serverless Functions)
    Markup JS
    CDN Ready
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

27. Hybrid
    
    
    Model
    Secure
    Available
    Up-to-Date
    Performant
    Fast
    

    View Slide

28. Hybrid
    
    
    Frameworks
    

    View Slide

29. No silver bullets
    We have a work
    f
    low.
    

    View Slide

30. Solutions Team
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. Stay on track
    The ecosystem is constantly changing.
    

    View Slide

49. The Web is Complex
    Enjoy it.
    

    View Slide