JSFoo Coimbatore 2019

On building faster, performant and secure web applications

Participate

State Machines for Frontend State Management

Submitted by Tejesh P (@tejesh95) on Wednesday, 17 April 2019


Preview video

Technical level: Intermediate Session type: Lecture

View proposal in schedule

Abstract

The major complexity of Frontend App Development arises when managing state of DOM, Internal variables, UI controls. Have you wondered if JS code can be architected to manage state without resorting to high learning curve state management solutions like Redux, MobX etc when not needed. Independent of what framework is used, the concepts of State Machines from Automata theory can be applied to your frontend apps.

Key Takeaways:

  • Computer science fundamentals like automata theory can help us in frontend development also.
  • Frontend apps can be architected well, when thought of as a database system.

Outline

  1. Simple introduction to State Machines
  2. Why and how State Machines are heavily utilized in Distributed systems
  3. Seeing frontend applications as a distributed system (with time bound events from DOM interactions), how to utilize the powerful concepts of state machines
  4. Separation of DOM writes vs DOM reads (State Machine)
  5. Action dispatcher - DOM writes
  6. State Transition(er), State Event Triggers
  7. How easy is it to have Time Travel Logger

Speaker bio

Tejesh works extensively writing code to build no-code platforms. Actively contributes to open-source library G1.js. Architected and developed MapViewer library to visualize Geo-Spatial data. Features include shapefiles loader, auto merge data with shapefiles, progressive drill down of shapefiles.

The ideas for the topic of session has emerged from experience of building and maintaining heavy data focussed dashboards applications written completely in vanilla Javascript. Only if frontend is as easy and maintainable as database systems!

Links

Slides

https://slides.com/tejeshp/deck/fullscreen

Preview video

https://youtu.be/fbxiXdQ4NUE?t=9

Comments

Login with Twitter or Google to leave a comment