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 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