Skip to content

Next.js, actors and declarative fetches with <Async>

Photo of Michel Weststrate
Hosted By
Michel W. and Ivan Z.
Next.js, actors and declarative fetches with <Async>

Details

Hi folks!

Our next meetup will feature Tim Neutkens, Gert Hengeveld and Ismail Habib Muhammad

18.00: Diner

19.00: Next.js - Tim Neutkens (@timneutkens)

Tim is the lead maintainer of @zeithq’s Next.js. Next.js is a lightweight framework for static / server-side rendered React. Next.js is used at companies like Netflix, Nike, Marvel, Mozilla, Invision, Deliveroo, and more to build web applications at scale. Nonetheless it is super easy to get started (like PHP back in the days, dump a few files at the right place and scribble away). Tim will introduce the philosophy, technical architecture and show us the first steps of building a first Next application!

19: 30 Declarative data fetching with the 'Async' component - Gert Hengeveld (@GHengeveld, Xebia)

Web applications have to deal with a lot of asynchronous operations. Loading and updating data is something you have to do over and over again. The common place to perform data fetching in a React component is in the componentDidMount lifecycle method. Just run fetch and use setState to store the result. This is simple enough (and very effective) but leaves a lot to be desired. That's why I recently released the 'Async' component ("react-async" on NPM).

'Async' is a React component built to deal with local asynchronous state. It handles (native) promise resolution, enhances it with metadata (isLoading, startedAt, finishedAt) and deals with the intricacies you wouldn’t normally think about.

20.00: Actor Model in JavaScript - Ismail Habib Muhammad (@habsq, Mendix)

Asynchronous processes in Javascript are hard. Not just hard to write, but especially hard to reason about. Will things happen in the order we intended? Complexity caused by async exists in all programming languages. In multi-threaded environments like Erlang and Java there is an elegant approach to manage the complexity caused by async: Actor model. In this talk we will see how Actor Model can be applied to Javascript. It does not just result in simpler code, but also in an conceptual model of processes that is much easier to reason about. We compiled our experience into our own library: Actrix.

We will show how the Actor model solve async problem in a very elegant way by exchanging messages between actors. We will dive into several different actor patterns, like bindings between the actors world and the UI, optimizations by skipping messages, or even cancelling async operations.

The Actrix library bring much more to the table: uniform communication method for local and remote actors. It also does not force developers to write actor in a peculiar way, allowing standard OO pattern like inheritance or composition to be applied. Not to mention type safety with TypeScript so that errors can be identified faster and developers will have full support on their IDE for feature like auto-completion and such.

20.30: Beers!

N.B: Mendix has moved to a new office, in the "De Rotterdam", so we are at a different location now! Take the entrance after the NH hotel entrance (same one as the municipality), then take the elevator in the back of the hall to the 5th floor

Photo of React Rotterdam group
React Rotterdam
See more events
Mendix Office (New)
Wilhelminakade 197, Fifth floor, entrance just beyond NH entrance · Rotterdam, ne