FrontendMasters - The Hard Parts of UI Development

FrontendMasters - The Hard Parts of UI Development

Register & Get access to index
thumb.jpg
When we build graphical interfaces for users - we enable them to interact with the digital world in a way that emulates their physical-world intuitions. It requires us to ensure our view (what the user sees) is consistent with our state (the data of the application).

This seemingly straightforward task of synchronizing our application state and view can be particularly difficult to achieve in the web browser because of its ad hoc development history. It becomes profoundly so at the scale of modern applications.

UI frameworks (React, Angular, Vue, Svelte) are designed to mitigate this - but without a deeper understanding of the ‘why’ behind these frameworks, they can be difficult to implement, debug and explain.

In UIHP we will build out a full mental model of UI development in the web browser and understand a system with JavaScript at its center but that interfaces with multiple aspects of the web browser - Webcore, Web IDL, the DOM, the HTML parser and more.

We will encounter the challenges in UI development in the web browser and develop techniques including one-way data binding, a JavaScript document object model (a ‘virtual’ DOM) & its reconciliation, UI composition, templating and hooks.

With a full conception of this system as a whole we can debug the most complex UI code, build out our own handmade UI frameworks and answer the most demanding interview questions.


By participating along with us in the workshop, you'll learn:

  • Data-binding in UI development - data and view consistency in the web browser
  • Declarative UI
  • Performance and the Virtual DOM
  • HTML augmentation techniques
Author
Satoru Gojo
Downloads
730
Views
4,262
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from Satoru Gojo