Introduction to Hyperapp.js

WRITTEN BY GARETH DUNNE @JSDIARIES

Oh no, not another frontend library I hear you say? I thought we already established that JavaScript Fatigue is very much alive and kicking ?

All these concerns are very valid, however, Hyperapp.js allows a developer to use all the popular functional programming based concepts from popular frameworks like React.js, using a simliar pattern to Redux while also including SVG support, inline CSS, JSX and fully implemented lifecycle events.

If you wanted to know about more about functional programming in the context of React.js check out this learning resource here.

It ticks all these boxes for what a developer really needs from a frontend library while also being the smallest frontend library available with next to no configuration or setup. An intriguing prospect no?

Minimal Approach

With no dependencies included and totalling the grand size of 1 KB it comes as quite a surprise that Hyperapp.js is able to pack in all the functionality that it does but thats the beauty of it really.

Think about the amount of time you are potentially spending choosing a stack, setting up your environment, choosing what bundler you want to use, as well as planning your styling pre processors. The time taken to do this can really add up and can be especially overkill for small scale applications or personal projects. And this is where Hyperapp.js really starts to shine.

Oh, and did I mention it even comes with its own built in Router system? So web apps can be created out of the box. Very impressive altogether.

State Management

As I mentioned, Hyperapp utilises state management based on the Elm architecture. Also included in this small package is its own virtual dom used to in a simliar way as React and Elm.

Included in the Github page is a simple example demonstrating how state is tracked.

In this particular example from the docs, we hold our state information in an object. Our state contains properties that describe what is likely to change for our component. Our actions object contains two different actions down and up that will manipulate our state to be increased or decremented depending on which button is pressed.

If you are looking for a more ES6 compliant way to write JSX you can also use Hyperx with Hyperapp. Check it out here.

And as with most JavaScript state management libraries we always want to keep our state immutable. In otherwords, when our state changes, we don’t want to edit the old version of the state but rather create a new object for the new one.

Immutability is a very important concept for state management and can prevent bugs and errors in your application.

This is very much the way you want to structure your state when using Hyperapp beyond simple demonstrative applications.

In the next section I will mention some resources that display how immutability can be used with Hyperapp.js.

Resources

While I will do plan on writing a post with some various code snippets demonstrating some of the capabilities of Hyperapp.js, I wanted to share two very good and free learning resources that you can use to get yourself familiar with it.

The first is a informative video series by Joe Santos Garcia from CodingPhase:

This is a great step by step course that includes setting up your environment while also teaching about state, actions and immutability.

Joe also makes this course quite accessible to a wide range of developers with clear and concise breakdowns and explanations.

Check out the full course here.

For a more advanced look at the Hyperapp.js paradigm, I discovered a very useful post by Dr. Gleb Bahmutov.

He goes on to discuss more advanced concepts such as reactivity and debouncing using some very nice examples.

Conclusion

There is a lot to be said about simplicity but there can be even more said about simplicity that doesn’t compromise functionality. For me, this describes what Hyperapp.js does for a developer.

I believe that substantial growth is inevitable for this tiny framework. It can be used for small to mid range projects and beyond.

I am considering rewriting the frontend of JSdiaries with Hyperapp. This is due to the fact that it’s so lightweight and hassle free to setup. The simple approach has enticed me somewhat and I would like to use it in combination with the WordPress API to transform this site into a web app.

Be sure to check it out the repo here.

More on this to come!

React.js vs Angular 4 overview

WRITTEN BY GARETH DUNNE @JSDIARIES

As I started this blog I had a bit of tunnel vision for wanting to focus on Angular and all its related technologies almost exclusively.

At that point my interest turned to Ionic as building hybrid applications using web technologies was extremely appealing to me.

And while I do think that specialisation is extremely important I also believe that loyalty to one technology can really limit opportunity and inhibit you from looking at the bigger picture.

I had averted my thoughts towards React.js for quite awhile, I really didn’t ever give it much consideration at all. The blog has died down in recent times as I’ve been working quite a lot with it and wanted to give a brief comparison to Angular.

Initially I’m going to give a non technical comparison but may follow up this post with a more in depth analysis.

If you are immediately looking for a learning resource for the React + Redux pattern have a look here.

I would also recommend having a look at Toptal covering the react ecosystem here as well.

Otherwise, this is a great starting series by thenewboston.

And in addition to this, a very clear and concise demonstration of React with Firebase was created by Wes Doyle.

React.js

Angular and React.js are compared constantly on many a forum, blog post or subreddit. But this comparison is only partly fair because while, yes, they are both hugely popular frontend tools, React.js is a library and Angular 4 is fully packaged framework.

React was originally created by Facebook in 2011 and was subsequently introduced into Facebook feed soon after. Come 2012, and it was implemented into Instagram too. It has come leaps and bounds since with a whole host of collaborations with other technologies etc.

Generally speaking React.js is quite lightweight due to it only being a library and like the latest in frontend frameworks, its aim is to provide an infrastructure that creates web applications with high speed reactive data and scaleability.

I personally think that React should be compared to Angular only when used in combination with Redux, a library that provides data state management for an application. This is when the benefits of React became more obvious to me. However, we will just go over a few aspects that both can be easily compared.

CLI

So this is where React and Angular differ in a more obvious way. Angular ships with a CLI (Command Line Interface) packaged with it. Again, this is due to Angular being a full framework rather than library like React.

Having said that Angular is very much a framework that relies heavily on CLI scaffolding for creating its project structure and directories. This also includes generating Ionic components too. You can really generate a wide range of file types for your project. This includes services, components (with or without scss enabled),  interfaces(for TypeScript), directives, pipes etc.

For more information check it out the CLI Docs here.

On the other hand,  React.js is less impressive in terms of its CLI capabilities out of the box and to be honest there isn’t any external package CLI that is as comprehensive as the Angular one.

However, a tool called create-react-app  exists which is an incredibly impressive piece of utility to have when starting your React.js app.

Its has every asset that you would require to build out a modern react project including ES6, Flow syntax and a great linter for catching common compile errors.

It really is an all encompassing package and reduces the downtime of starting a new application without the worry of all the setting up of many extras in this current era proclaimed as JavaScript Fatigue.

TypeScript

I originally started using TypeScript with Angular as it was built into the framework. However using TypeScript with React and Redux is just as incredibly enjoyable and effective.

In combination with Typescript, if you also include an ES linter in your coding environment you are really set up to write effective and clean code, as your code will not compile if something is unused or anything you write could possibly be null.

This is available for both React and Angular so theres not much advantage for either one here except that Angular comes packaged with TypeScript, while it may not be as obvious how to use it with React.js

However there is a fairly comprehensive blog post about it here that I encourage you to check out.

To create full React/Redux/TypeScript ecosystem can be quite challenging to get right. However, its a very well regarded to use this combination as it provides the developer with very well written code as well as incredibly power state management processes for managing your data in relation to your UI components.

This TypeScript-React-Starter template repo takes a lot of sting out of setting this powerful combination up.

Hybrid App Development

The potential for hybrid app development with both of these technologies could potentially be a tipping point for developers. Both offer very different approaches for this.

On the Angular side of things we have Ionic for producing web view based applications that can be published to both app stores. I have covered Ionic extensively on the blog before so please start here if your looking for more information.

In a nutshell, Ionic provides us with a very nice infrastructure to create apps that run in the web view on a mobile application. They tend to be not as fast as its native app technology counterparts

Meanwhile, React Native has gained a lot of attention recently due to its fast and powerful production of natively functioning applications using JavaScript and React.js.

From what I have read, there is a lot of positivity for React Native going forward and its one to definitely watch out for over the next year.

I would also recommend that you check out how Airbnb is using React as this may further convince you of its potential.

 

In fairness, Angular also has native mobile app creation library called NativeScript . And while I don’t have personal experience with this the general consensus seems to be that is not as popular but just as capable.

A blog post by  goes into more detail about the comparison. And to be honest both technologies are just capable as another for providing hybrid and native mobile development.

Documentation

There isn’t too much too compare here. Both of these technologies have informative documentation but in all honesty I would say the Angular docs are far more comprehensive and clear than the React ones.

This is just my opinion but the use cases and examples from the Angular docs stood out more to me.

Conclusion

So what can you take from this overview exactly? Well I really don’t think there is a clear winner from these comparisons alone. And really there won’t ever be a clear winner to most people, both these front end technologies are modern, fast, full of functionality and are just as capable as each other.

So your personal prefernce will go a long way in choosing what you find the most comfortable and suitable for your frontend aims.

But there is no doubt that Angular and React (and Vue!) will be here for years to come as they are changing the way user interfaces interact with data and styling.

As I get to gripes with a React, Redux and Typescript stack I find myself switching over somewhat. However, we’ll see how this goes but I will be providing some more technical posts of this stack in the future.