Shane Osbourne, well known open-source contributor, on tools and techniques that are keeping us ever-ahead in the industry.
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.
The need for speed
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
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.