JavaScript in 2018 – What to learn?

WRITTEN BY GARETH DUNNE @DUNNEDEV

JavaScript 2018

As the end of January is fast approaching, I thought it would useful to highlight some of the latest features in JavaScript to keep your eye on in 2018. This is not a comprehensive list by any means, but here are 5 things I think will see another surge in popularity over the next 11 months.

React Native

React Native is already an incredibly popular JavaScript native app development library. But its newly released feature will really bring it into the forefront this year.

I am of course talking about the release of React Fiber. This is where React Native truly stands out.

React Native’s performance was always considered to be fast and has even been compared to native developed apps.

However, with the release of React Fiber, areas like animation, layout and gestures are now signficantly more responsive. It now has the ability to split rendering between chunks and spread it out between multiple frames.

This is not the only crowd-please; Fiber also assigns different priorities to different types of UI updates. The more important ones take priority when React re-renders.

For a more detailed guide to React Fiber I recommend this explanation here on the React Fiber Architecture.

To summarize, React Fiber works smarter, not necessarily faster. Prioritisation of tasks makes it a faster application. Very exciting stuff for those interested in fine-tuning performance.

Styled Components

Styled Components
Styled Components

The concept of Styled Components stems from the idea of components being reusable and modular. This is usually associated with best practices in the latest of JavaScript technologies.

As such, some of the industry seems to be shifting towards creating components that contain a certain piece of functionality that can exist in isolation. For example, a button or a menu.

In other words, this component can be migrated from project to project, needing little customisation to be fully functional. A component like this opens up many opportunities to inject different styles into it in various situations.

A library called Styled Components is using the idea of module styled React web components and I encourage you to check it out here.

While my personal preferences for styling are still SASS and partials, there is no denying that styled components are the inevitable evolution of modular UI components.

This a very useful one to know in 2018 as it injects scale-ability and modular practices into the styling of your individual project components. This ethos will not be going away any time soon as more technologies adapt the same behavior.

If Styled Components perk your interest and your not familiar with the ways of React.js you might find it useful to get started with this learning resource.

CSS Grid

CSS Grid is a relatively new layout system available in CSS. Unlike Flexbox, you work with a grid layout by applying CSS to a grid container (parent) and also the grid children which become grid items.

And although its not directly JavaScript related, I feel compelled to mention it here. It is a great addition to the layout of any web application or any JavaScript framework.

The basic premise seems solid, but why is this necessary? Well for one thing, it is the first proper layout system available from the browser. Flexbox was quite a one dimensional system in this regard.

It is also a cleaner way to create your responsive layout. This is because there are no additional untidy classes to add to your markup. In addition to this, there are no extra divs used to define something like a row. Instead, there only is a parent and a child.

And while it will be over a year before CSS Gris is implemented in production environments, its trajectory is really on a upward scale for 2018. There has been nothing but positivity for it and because of that I think it will really come to fruition this year.

I have started to change the grid system in my beer name finder application (built with Angular 5) from foundation to CSS Grid which you can see below:

Beer Name finder

I intend on doing a full post to CSS Grid but in the meantime this is a great comparison of CSS Grid to Bootstrap.

While this video from Coding Tech originally introduced me to CSS Grid:

GraphQL

GraphQL has been rapidly gaining popularity. When I first heard about it, I was really intrigued at the prospect of using a new query language for my API calls.

It makes sense to me that I should dictate what kind of query I want to send over to my API endpoint. Using GraphQL I can just define what format my requests and responses should be using a Type face query language which I would describe as hybrid between JSON and TypeScript.

There are plenty of examples on the site but I’ll give you a brief overview of one here.

You define your request Type like so:

You then use this Project Type in your GraphQL request;

And the data returned is logical and what you would expect from what you described in your request.

Makes sense right? I encourage you to play around with it here.

While I don’t have all that much experience with GraphQL, I can attest to it being a great service that can really streamline how you interact with data. This will make any frontend developers life that much more straightforward and is a tool to learn in 2018.

 

Electron

Hybrid desktop applications built with JavaScript are becoming less taboo among the web development community. Electron has seen particular success.

I have written a full post here about hybrid desktop applications and Electron.

Electron allows a developer to build a desktop application where the same codebase for the application is used to create iOS, Windows and Linux versions.

The mantra write once, use everywhere springs to mind here. And although there has been some concern for performance, this has been eased somewhat by big names in the industry creating applications that we all love and use.

Applications like:

Chances are high that you’ve used one of these in your daily life and haven’t noticed anything unusual in performance.

In 2018, I can see more popular applications adapting Electron for their desktop versions. Not only does it look like it will become even more popular but it also reinforces the unique flexibility that JavaScript has as a programming language.

JavaScript World

Once again, there doesn’t seem to be any slowdown for JavaScript while it progresses further into a wide variety of technologies and services. These are only some of my picks to watch out for and learn in 2018. Please let me know what your looking out for this year.

Ionic vs React Native – What is the best choice for your mobile app?

WRITTEN BY GARETH DUNNE @DUNNEDEV

The mobile app development market isn’t what it used to be for developers. In contrast to 5 or 10 years ago, the Android and iOS stores were locked to you as a developer depending on your ability to learn the native languages related to either option.

We are now given a plethora of choices when it comes to determining the right technology that you want to create your applications with.

Technologies that allow you, as a developer, to be no longer restricted to one store depending on what language that you know.  Mobile development using JavaScript opens up so much more opportunity for a developer or a team seeking to finish their own ideas while also having a much broader market to publish it to.

These choices are usually categorised as either WebView app development (Ionic, Xamirin) which runs an app through a web browser on a mobile phone. Or native app development (React Native, NativeScript) which use core native components through an API to run in a mobile application.

In this post, I want to compare Ionic to React Native, as personally, I would consider both to be key frameworks in each of their respective fields of hybrid app development.

If your looking for a learning resource for React Native you can look here.

I have also published my Ionic app to the Android store (soon to be iOS as well) so fell free check it out if your keen on seeing an Ionic app in action.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

Language

Both of these technologies are built around using JavaScript. Ionic is based around the Angular 5 framework. This is quite beneficial as you have full access to the Ionic CLI to scaffold a project, generating your components/pages/services via the command line.

Ionic’s combination with Angular means that you will be using TypeScript by default which is an awesome subset of JavaScript and allows you to define types while having object oriented JavaScript code.

TypeScript can also be used in React Native but will take another step to setup initially or you could just check out this template here.

React Native is based on React.js a very popular frontend development library. Its focus is on its reusable components that are shared between mobile and web versions.

Both frameworks use the latest in ES6 practises including classes, arrow functions, templates string etc. Basically, on a core JavaScript level they are both stacking the latest and greatest.

I wouldn’t be too concerned either way here, if you are a fan of Angular and how it scaffolds its projects, services and components then Ionic might be more appealing.

On the flipside if your already familiar with React.js’s style of functional programming than React Native will just be a continuation of that with its own style of native mobile components.

Ease of use

A lot of the ease of use of an Ionic application can to attributed to the readily available list of Native Components and its CLI generator.

Ionic provides these native components plugins such as Geolocation or Google Maps with relative to ease to install.

Simply add them using Cordova (which comes with the Ionic framework)

And then import them into your project using ES6 import syntax.

The documentation for these native plugins is actually quite verbose and its clear how you can utilize various additional methods to get the most out of your desired plugin.

In contrast to this React Native uses APIs that are accessed through the global navigator object. You can then call any relevant methods that are related to the native functionality that you want to use.

For example:

On the navigator.geolocationobject you can call any of the following methods getCurrentPosition(), watchPosition(), and clearWatch().

Check out the full list of React Native API’s here.

Overall, I think I’d edge towards Ionic on this one. Apart from the wide range of documented plugins. The core CLI in combination with Cordova gives you plenty of commands and tools to generate resources, splash images, building tools as well the recently released Ionic Dev which provides you with an app to test your creation on any device you want.

For me, these testing tools allow a dev to access a wide range of devices and increases the accessibility of using Ionic over React Native.

Performance

Perhaps the most defining aspect when comparing both of these technologies, performance is always a big worry when dealing with hybrid mobile applications.

This is where React Native truly stands out. React was fast to begin with and was even comparable to natively developed app speeds for the most part. However with the release of React Fiber  it is now much more responsive to browser events.

Not only this but Fiber assigns different priorities to different types of UI updates with the more important ones taking priority when React re-renders.

For a more detailed guide to React Fiber I’d recommend this post here by Mark Cruz.

To summarize, React Fiber works smarter, not necessarily faster. The priority given to more important tasks results in a faster application.

In comparison to this Ionic is still not bad performance wise. In fact, it has come an awful long way since its first version.

Ionic 3 was released with lazy loading modules taken from Angular. This has certainly increased initial loading times of the application as well as subsequent loading of pages and assets.

Lazy loading enables the app to only load the modules that it needs at any given time.  A great feature undoubtedly but still isn’t up to snuff when compared to React Native’s native component library.

Maintainability

Due to of some platform specific code segments of React Native, the ability to maintain an application is a bit more difficult. Whereas in Ionic, a functionality change for example, will be reflected in both iOS and Android builds, for the most part anyway.

Here is a snippet of how to target Android exclusively in React Native:

Importing and using the Platform module is probably the exception rather than the rule here, the majority of React Native components have both an iOS and Android equivalent so in most cases this shouldn’t be necessary.

Its definitely not difficult to target platforms like this but it seems more frequent in comparison to Ionic where I very rarely found myself using platform specific code with the exception of styling some components.

Size

The bundle size of your application plays a big role in defining how big or small your .apk and .ipa files will beI found Ionic to have smaller bundling size overall.

Without doing statistical comparisons for both on compilation code and bundles (which I’ve struggled to find in 2017) theres not much to say here really, React Native’s component library tends to be heavier and this is the price for a faster and closer to native application.

Which is best for you?

Overall, theres quite a lot to digest here. While both are great platforms to launch your app the overall performance benefits for React Native as well as its recently released fiber potential really edges for me.

This really opens up how powerful React Native can be with significant performance enhancements when compared to Ionic.

But don’t get me wrong Ionic really shines in its own way, its fundamental paradigm of write once, use everywhere allows you to usually have consistent code between your iOS and Android versions.

In this way, React Native is more work for its platform specific code but even with this in mind, for me, the performance of React Native still outweighs this benefit.

I have had much more exposure to Ionic thus far but with my recent projects using  React.js and Redux,  I’m really looking forward to applying this way of functional programming to create apps.

At the end of the day, you can use both platforms to achieve your hybrid application goals.  They certainty differ, with React Native really nailing performance and Ionic providing more accessibility.

They both also have a great communities to boot so until one becomes miles ahead of the other your not doing yourself any disservice to your future applications by picking either one.

So if you feel like getting started on either one, I’ve included some sample tutorials that I’d recommend: