JH’s Shane Osbourne on the Course he’s built for Preact Learning

At JH we place a very high value on both open source and the idea of giving back to the community. Whether it’s contributing to the many open source projects that we currently do, or sharing things we learn on this blog – JH is always looking at ways to give back to the community.

At the same time we’re always on the lookout for tools and techniques that’ll keep us ahead of the curve and allow us to solve our clients needs in new, better ways.

Shane Osbourne

The need for speed

In the interest of providing a best-of-breed Magento 2 experience for all users on a recent project, we set a goal to deliver all of the Javascript a website would need for a component model, state management and ajax functionality – all within a single file, and crucially, this single file must be no larger than 50KB in size.

If we were able to stick within this extremely limiting restriction, we would be allowing even the slowest mobile phone, with the slowest connection to still render and request data within two seconds – any additional functionality can then be provided with lazy-loaded modules on demand. This was a huge undertaking and we had to be pretty ruthless about the libraries we cut, and those which we keep.

Top of the ‘keep’ list were Immutable (to handle state & for its utility methods) & RxJS (for reactive updates & for it’s ajax implementation, which is cancellable) – both of these libraries combined accounted for over 35k when minified and gzipped.

Those two libraries were deemed ‘essential’ – which only leaves us 15kb for the component system, cookie/localstorage management – not to mention actual application code such as state updates, feature detections, navigation etc…

Preact was the answer

If we were to ever hit this 50kb budget, we needed something that would be extremely lightweight, whilst still offering all the features we required. Weighing in at only 3kb, Preact was the obvious choice. Preact is a Javascript framework for providing a component-based UI system. It’s incredibly fast – being the thinnest layer of abstraction over the DOM possible and it’s an alternative the popular React with most of the same features and APIs – making it easy for people to get to grips with.

Up and running with Preact

After implementing Preact at such a large scale and after seeing  it grow in popularity within the developer community – I decided to put together a course on Egghead.io that takes you from  zero Preact knowledge, through to a fully functioning Application.

In the course I begin with nothing more than an empty directory & a text editor. Through small, focussed lessons I teach how to set up tools such as Webpack & Babel and how to configure these tools for use with Preact. Then I move on to teaching how to create components and how the Preact API mirrors that of React – highlighting the differences/additions along the way. Finally I look at the interoperability with existing popular libraries in the React community such as Redux & React Router and with the popular development tools such as Redux Dev Tools & React Dev-Tools.

 

Shane’s course Up and Running with Preact  is now available on egghead, alongside Shane’s other courses, all ready and waiting here.