notes on the "webs next transition" post by kent dodds

Kent writes about the webs next transition (Oct '22)

Tech which powers the web (http, html, js, css) were all developed over 25 years ago (eek!)

Major architectural patterns over that time

  1. multi page apps (MPA); the era of html pages, java server pages
    1. all code (persistence, data fetching & mutation, rendering, routing) runs on server except UI interaction in browser 
    2. cons: full page refreshes and ui feedback control
    3. pro: simple architecture and code management
  2. progressively enhanced multi page apps (PEMPAs); the era of jquery, mootools etc
    1. code including rendering runs on server and UI both (if no js then fallback to MPA mode
    2. pro: improved UI interaction, more control on FE
    3. con: more complex architecture, code management, code duplication
  3. single page apps; era of backbone, angular, ember, react, vue
    1. routing, data fetching & mutation code is on both server and FE but only rendering and UI Feedback on the FE
    2. pro: less code on server (most all routing on FE, rendering on FE), more FE control
    3. con: exploding bundle size, fetch waterfalls, runtime performance (lots of js to run), complex state mgt 
  4. ...the next transition...  <- guessing this is what Kent will blog about


Kent introduces the new architectural pattern #4: Progressively Enhanced Single Page Apps (PESPA) - a mix of SPA and MPA
  • "The primary benefit of Progressive Enhancement is not that "your app works without JavaScript" (though that's a nice side-benefit) but rather that the mental model is drastically simpler."
  • BE code and FE code are the exact same, shared enabled by using a library which supports this (...ok Kent I see where this is going...)
  • FE mutates data and sends as a form submission to the action listed on the form which is sent to the BE code which does persistence etc. and sends back success/fail response which triggers a redirect or re-render
"What distinguishes a PESPA:

  • Functional is the baseline - JS used to enhance not enable
  • Lazy loading + intelligent pre-fetching (more than just JS code)
  • Pushes code to the server
  • No manual duplication of UI code (as in PEMPAs)
  • Transparent browser emulation (#useThePlatform)"

Kent writes that Remix is leading the charge for PESPAs, the first framework out of the box to offer full support for Kents vision of PESPA. Remix is a bridge across the network.

I'm thinking Remix will be big. It's a powerful model which addresses challenges with SPAs. 
It's also built by the guys who brought us react-router which has been downloaded over 1bn times. That is significant because react-router v6.4 now provides implementations of Remix concepts like loaders and actions and use of form element for for submissions (but without the Remix server side support). The developers who did all those 1bn download is a big ready audience who could be easily migrated to the newest react-router as a "gateway" to remix.


Kent also includes an interesting looking reference to an analysis of "the new wave of javascript web frameworks"


Comments

Post a Comment

Popular posts from this blog

deep dive into Material UI TextField built by mui

Image
The Material Design system is a design system used to create consistent digital experiences across platforms such as android, web and ios. Includes: a color system a typography system a shape system a grid system it addresses motion and lots more Also includes Material Theming which makes it easy to customize Material Design to match your brand. Material Design is not just a set of guidelines it is a whole ecosystem. Material itself stopped maintaining it's react implementation and recommends opensource versions.  A very popular open source implementation is  MUI ,  a react component library  built to implement Material Design . Bills itself as the "worlds most popular React UI framework" and at this time has 1.2M weekly downloads on npm and used by over 750k projects on github (did I mention it's very popular?).  Note: there are other react component libraries implementing bootstrap and ant design for example, so up to you and your design team on what you choose. 
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l
Read more

react-router v6.4+ loaders, actions, forms and more

react-router  react-router is used for in app single page app navigation, we configure routes for pages in the app to map to components react-router has over 1bn downloads, its an industry standard (but there are others e.g. Nextjs router) many apps use react-router, many on v5.x the new react-router 6.4.x the newest major version of react router v6.4 is a significant enhancement which adds a lot of new features. react-router v6.4 offers new features to load data (loaders) and handle actions (actions).  It's done gone all Remix-y which makes sense because the same guys wrote both. eliminates a lot of boilerplate code to fetch data in useEffect() and set various loading states put your data load and update logic in react-route components instead of custom code unlike Remix, react-router v6.4 is still just all on the client (not server like Remix) paradigm shifts Lets start with a couple of high level ideas; "back to the future" so to speak OR "what's old is new ag
Read more