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. Modern Solutions
    Deploy
    Bel Curcio - curcio.be - @okbel

    View full-size slide

  2. Director of Solutions
    Bel Curcio
    / Vercel

    View full-size slide

  3. 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 full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 2004
    Microsoft
    Frontpage and
    Dreamweaver


    vBulletin


    CPanel/Fantastico


    Shockwave/Flash


    LAMP



    🧬

    View full-size slide

  8. WYSIWYG


    Editors
    HTML ????
    CSS Server
    DX
    Static Files
    Save As



    2004 Web Development

    View full-size slide

  9. WYSIWYG


    Editors
    HTML Flash
    CSS Server
    DX
    Static Files
    Save As


    … SPA
    2004 Web Development

    View full-size slide

  10. WYSIWYG


    Editors
    HTML JS
    CSS Server
    DX
    Static Files
    Save As



    FTP
    2004 Web Development

    View full-size slide

  11. The Web from the WebMaster’s Perspective.

    View full-size slide

  12. The Web from the WebMaster’s Perspective.

    View full-size slide

  13. 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 full-size slide

  14. WYSIWYG


    Editors
    Server
    DX
    HTML JS
    CSS
    Static Files
    Save As



    FTP
    2004 Web Development

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. UI Data
    Functional Model of a Web App

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Jamstack
    APIs
    Markup JS
    CDN Ready

    View full-size slide

  22. Jamstack
    Microservices


    (Serverless Functions)
    Markup JS
    CDN Ready

    View full-size slide

  23. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Hybrid


    Model
    Secure
    Available
    Up-to-Date
    Performant
    Fast

    View full-size slide

  27. Hybrid


    Frameworks

    View full-size slide

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

    View full-size slide

  29. Solutions Team

    View full-size slide

  30. 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 full-size slide

  31. Solutions
    Team
    Focus on


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

    View full-size slide

  32. Focus on


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

    View full-size slide

  33. Cover it all.
    Analysis
    • Industry - Retail, News and Media, Financial


    • Audience - Segmented Audience


    • Product - Product considerations and technical aspects.

    View full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

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

    View full-size slide

  37. Detailed product consideration and its technical aspects.
    Analysis/ Product
    • Technical Considerations


    • Single Page Application (SPA)


    • Multi-Page Application


    • Multi-tenant Application


    • Microfrontend Application

    View full-size slide

  38. Focus on


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

    View full-size slide

  39. What is fast?
    Solutions
    • Real Performance


    • Perception of Performance
    / Performance

    View full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

  42. • 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 full-size slide

  43. Solutions
    Team
    Focus on


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

    View full-size slide

  44. Solutions
    Team
    Focus on


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

    View full-size slide

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

    View full-size slide

  46. Focus on reality
    Let problems guide you. Work on real case scenarios.


    (And some edge cases)

    View full-size slide

  47. Stay on track
    The ecosystem is constantly changing.

    View full-size slide

  48. The Web is Complex
    Enjoy it.

    View full-size slide