Learning Postcards: The software stack

This is a short and pretty technical post. It just fills a void between researching on the needs, specifying the functions of the project, and the actual realization.

I deliberately searched for the most innovative techniques for each technical need. It’s a way to challenge me to learn new tools and to be sure we have everything needed for the best experience.

We want the product to be available in a web browser. It’s important to accelerate adoption. Early adopters are often coming across it by browsing the web.

We want the product to be very fast, fluid. The best is to have an application using all the capabilities of the client-side and limit the round trips to the servers.

We want learning cards to degrade gracefully when embedded in emails or web pages. This means the application must be isomorphic ( we say universal now). this means the rendering can take place on server-side as well as on browser-side.

This is what I choose:

React from facebook. An open source rendering engine very fluid, detail oriented. We all know how well it performs inside Facebook. Facebook recently released React-native. This is a way to port a web application to a native app. The app can be on IOS or Android. So the goal is to use React in view of using react-native behind.

Redux is a new way to manage the consistency of states behind React. It was not very easy to learn and understand but the architecture is done completed.

The server side is also in javascript using NodeJS v7.5

Using this setup both React and Redux can operate on client and server. This fits our universal app requirement. This means layouts can be produced on the client screen or behind the scene on the server.

Redux is complemented by redux-thunk, redux-promises and redux-observable. The later is the latest state of the art technology from Netflix to ensure fluid experiences.

We use local storage synchronisation. This means that cards can operate in disconnected mode. You can use your time in the air to learn 🙂

To pack the application for the client and deliver it very quickly we use webpack.

For the styling we will start with Bootstrap V4, the not yet released popular design toolkit from Twitter. The lastest iteration of Bootstrap emphasize the use of cards (winner!) and flexbox. Flexbox is the very latest iteration of CSS. It helps to produce balanced, well organized design without any tricks. Of course it won’t work on (very) old browsers.

To make the app available on desktop, for accelerated performance we wil use Electron. It’s a wrap of NodeJS and a browser in a single desktop application. As if you had a server and a browser glued together. Slack is using this platform for their latest release of the desktop application.

I surely forgot some key elements and will add more to this already rich mix.

All those libraries and tools are released under open source licenses They are the work of work of plenty of generous people working on their own on inside great companies. It’s not possible for Kneaver Corp to depend on GPL v3 or non commercial libraries because our aim is to finally deliver commercial products.