Angular 5 Released

WRITTEN BY GARETH DUNNE @DUNNEDEV

As of 1st of November,  the latest version of Angular (Angular 5) has been released.
The release is named Pentagonal Donut and is the latest of Angular releases in its semantic versioning release schedule. The release details many additional features which I want to cover here.

Much to the dismay of some of the web dev community the semantic versioning of Angular is to continue with each release being marketed as a brand new version. I personally don’t have too much of a problem with it changing every 4 or 5 months but I completely see why the new iterations may confuse and annoy devs within the frontend community.

Similar to the way that I’m detailing Angular 5 in this post, this release provides an opportunity for those to remarket their courses and tutorials with the shiny new version of Angular.

I haven’t found any specific Angular 5 learning material but this might suffice until there are any updated learning resources.

While I’m sure plenty will cover the new features in great detail, I wouldn’t worry about feeling compelled to learn this completely new version of Angular because in reality these releases don’t tend to be groundbreaking and usually have minor breaking changes to previous versions.

Lets highlight some of the new features.

AOT

During the build time of your Angular applications you had to previously specify AOT (Ahead Of Time compilation) like so:

This is now occurs by default so you now longer have to specify the ng build.

Performance of AOT has also been increased with faster rendering, less asynchronous requests and an overall reduction of download sizes. This added feature really aims to improve the speed of Angular bundling in development and production and is welcome improvement to AOT.

An interesting watch mode command has also been added.

The idea of this command it to enable your application to only recompile when absolutely necessary. Therefore it will be much easier to use AOT in development mode rather than just production mode because previously, the whole application would recompile when a change was made making it only useful for production.

Forms

Some small changes having been made to the forms API. You can now specify to run validation on submitting a full form rather than it occurring on individual input fields.

We also now have the option to specify when to update a inputs fields value or validation state.

For more Angular 5 form examples check out this post here.

Animations

A small change has been added to animations for your application.

You can now invoke an animation when a desired value is incremented or decremented. 

This is a very handy feature as many use cases of an animation can depend on a value changing but having two new aliases in :increment and :decrement allows us to apply a specific animation to a value going up or down, in this case we want the font size and color to be affected.

Http

There has been some minor changes here, including the deprecation of the HTTP API. @angular/http which has now been replaced by @angular/common/http.

Pipes

Pipes have been overhauled and no longer rely on the Intl API. The most common pipes that you might have used that would rely on this are number, percent, currency etc.

The currency pipe now takes a string as a second parameter.

If you don’t want to use the new pipes you can still get access to the older versions by importing DeprecatedI18NPipesModule .

These are just a small snippet of the changes. For an extensive look at all updated pipes have a look here.

Conclusion

While the ever changing semantic versioning may get on the nerves of some of the dev community, Angular 5 a pretty nice update overall.

These frequent big updates are a smart move on behalf of the Angular team. It increases the marketability of the framework and also constantly keeping it in the limelight each time while not providing anything too earthshattering.

I’ve only covered some of the new features here, feel free to check them out in summary by Traversy Media.

I’m also still a big fan of Gary Simon’s content from Coursetro. So feel free to check that out too.

Feel free to check out the Angular release schedule here as well.

Styled Components – Future Reusability

Styled Components
Styled Components

WRITTEN BY GARETH DUNNE @JSDIARIES

The idea of reusable and modular components is often associated as being best practise with the latest and greatest in the JavaScript world. As such, some of the industry seems to be shifting towards creating components that contain a certain piece of functionality that cab exist in isolation. For example, a button or a menu.

In otherwords, this component can be migrated from project to project with little customisation needed to be fully functional. From this idea I would like to demonstrate the use of styled components.

While my personal preference for styling is still using SASS and partials there is no denying that styled components is the evolution of styling modular UI components.

A library called Styled Components is using the idea of module styled React web components.

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.

Most of the guidelines are already covered in the docs here but to install Styled Components into your project enter the following in your node command line:

CSS in JS

For sure, this topic of conversation in particular has to be one of the most polarising within the dev community. It really comes down to personal preference but in the context of styled components template literal strings from ES6 JavaScript are used to describe the CSS to our component.

This is the basic concept of styled components and how it differs from standard CSS/SCSS styling sheets.

I’m not going to cover this extensively here as this a post specifically about Styled Components but if you wanted to get more in depth on this topic I’d recommend this podcast episode by Wes Bos and Scott Tolenski.

Creating a Styled Component

Using some examples from the docs we can declare the styled properties of a title text h1 element.

And its as simple as that these ES6 back ticks provide the styled data properties to our component. It definitely seems an unusual but creative way to describe style properties. But at its core it really is just like declaring normal CSS, there is no issue converting already defined CSS from one of your components or projects.

I think it is quite important that the string interpolation is still very simliar to normal CSS. It will be key to converting developers over to this way of injecting styles in JS because it already feels familiar and comfortable to use.

But this is just a basic implementation you can go on further to manipulate and interact with your styled components in combination with things like JSX in React.

This is where the ability to customise CSS with JS becomes apparent and I would highly encourage you to explore the docs even further.

Media Queries

Media Queries for specific styling at different dimensions are also not a problem using Styled Components. A great example from the Git demonstrates this:

We have created our utility file that contains our specific dimension size.

We can access this specific handheld dimension size by importing our utilty file that we just created and referencing is in our template literal string using the template variable symbol $.

Interacting with Props

In the context of React and Styled Components, we can manipulate the internal properties of our styled component using props that we send down to it.

This is perhaps the most useful thing about styled components as it can be dynamically styled based on a single prop that you send down to it.

Pretty awesome stuff and it really highlights where CSS in JS might be more useful when you want to manipulate a style based on a property or other data.

Summary

As I hope I just outlined, there are a lot of benefits to creating components in this way. In the future, I wouldn’t be surprised to see mass adoption of this isolated component pattern at enterprise level. It would enable a company to create their own JavaScript UI library that could be used across a wide range of projects.

Each piece of the UI could be customised by passing down new props or injecting new template literal CSS.

But this isn’t limited to large scale projects either. The possibilities are really endless for creating migratable components like this and its really another weapon the arsenal of a frontend JavaScript developer.

React Alicante 2017

WRITTEN BY GARETH DUNNE @JSDIARIES

Last weekend I attended React Alicante. Its the first of its type set in Spain’s southeastern Costa Blanca.

With an attendance of over 250 and a wide range of the latest and greatest from the React world, React Alicante delivered some interesting topics ranging from React Native all the way to GraphQL.

In this post, I want to cover the talks that stood out most to me, bearing in mind that there was a lot more covered throughout the event outside what I mention here.

If any of the following talks 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..

React-Storybook

Marie-Laure Thuret had an awesome talk regarding React Storybook. She demonstrated how you can use this development environment to document your UI components while testing and toggling various props and actions to see their effects.

Storybook provides a dashboard where you can manipulate various states and props in your application to see the outcome reflected in your desired documented component.

I found it even more intriguing when I saw how Airbnb had implemented it in order to document their own UI components.

While I really do see the value in documenting your React components for large scale projects I can also see its value being diminished somewhat for smaller scale projects as the time spent building a system of UI documentation with Storybook while also having to write tests specifically for that documentation system might be overkill in some instances.

Overall, using Storybook provides a way to create components with more reusability and testability which is always a useful thing for mid to large range projects.

GraphQL

Possibly one the most interesting talks at the conference was by Nikolas Burk, His talk (Building a realtime chat app with GraphQL) was extremely engaging. I was really intrigued at the prospect of using GraphQL as 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 it seems like 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 you 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, from what I’ve seen I can attest to it being a great service that can really streamline how you interact with data. Which will make any frontend developers life that much more straightforward.

The response to his presentation was overwhelmingly positive and his company is actively hiring where you will get the opprtunity to work with GraphQL, be sure to have a look at his slides here.

Code-splitting in React apps

A talk by Glenn Reyes detailing code spitting in react apps was a very topical and interesting take on how our JavaScript bundling systems should be working at the moment using the new import() proposal.

Be sure to check out the slides for his talk here.

His talk made me reflect on how valuable the long term caching capabilities of bundling really is. Perhaps the most valuable thing I took from his talk was the idea of only dynamically loading the components you need for your application.

I previously knew of lazy loading from the point of from Angular but seeing it implemented in this way for a React application was fascinating.

Taking a snippet from his slides like so:

The dynamic capabilities of the import syntax allows us to specify when we want this Async component loaded. And because the import syntax actually returns a promise we can use ES6 async and await syntax to wait until the import promise has been resolved. From this point we can then set the value of our state to the ready loaded component.

This seems like a very smart way to preload a component when your component needs to mount. The state will refresh and component will display in the render, some really awesome stuff here.

Redux Forms

A talk by Erik Rasmussen named, A practical guide to Redux Form was very interesting and made me rethink my current system of form validation using React and Redux.

Erik is the creator of Redux Form and he outlined how this library provides an easier way to manage the various state changes of a dynamic form.

Check out his slides about Redux Form here and the repo for it here.

The library comes with a single Redux reducer that you can use to enable various states of the form field properties. For example, the standardised form attributes used for describing the state of form fields such as pristine or dirty.

This is very handy when you want to apply a very specific style change if the user has not interacted with the form yet (dirty) or if all containing form fields and controls are valid which can sometimes can be tricky to manipulate when not using a library like Redux Form.

Conclusion

Overall, the conference offered a lot in terms of providing the latest and greatest in the React world. While I’m sure there is room to grow it was definitely a successful first edition. I’m sure next year will show signs of expansion, a bigger venue and even more talks.

All talks and slides are available here.

So support the JavaScript community and increase you knowledge at the same time by attending conferences like these. Personally I’ve been looking at React Amsterdam in April. Feel free to suggest others!

Want to brush up on ES6? Check out this awesome resource.

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.

Common Ionic 3 Development Mistakes

WRITTEN BY GARETH DUNNE @JSDIARIES

As I have got to terms with many of Ionic’s development ways I have encountered a whole host of different errors that has slowed my development down.

In many ways, this is key to learning the framework, however I thought I’d share some of the more frustrating moments that I encountered so that a developer may be able to be more aware in his/her app building process.

I decided to create this post after seeing a simliar post from Toptals most common ionic development mistakes.

Again, if your looking to expand your Ionic knowledge I highly recommend this Ionic 2 cookbook.

These mistakes stem from an app that I made called CoffeeTrail.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

It’ll be on the iOS store very soon but be sure to check it out on Android here.

Cordova Documentation

The Ionic framework is built on top of Apache Cordova.
Cordova is responsible for packaging your HTML5 app as a native app that can run in Android, iOS, and other platforms. They have documentation that is both informative and verbose and should be read frequently when experiencing bugs and errors.

This seems to be relatively simple idea but one I was consistently ignoring at the start of my development. Whenever I would search for specific Ionic errors I would limit my search to all things Ionic, including the Ionic forums, stack overflow etc.

A lot of the time I would actually find a solution by looking at the Cordova documentation.

As Cordova is really the bread and butter of an Ionic application it can really help to examine information about specific plugins that power your application.

There is a significant amount of useful documentation here, especially for platform specific information for Android and iOS:


Ionic View

One of the handiest ways to produce an .ipa file without owning a Mac is to use Ionic Package. Ionic Package builds your application in its own cloud so that you can download it from their server.

However, you still have to run around many configuration steps to produce an .ipa file.

My advice here is to meticulously follow the Ionic Documentation to do this.

And any time you want to generate a Apple keychain file or p12 from a Windows machine have a look at this guide here.

Once finished you can view your application via the Ionic View app here.

This is very useful for testing your application across a wide range of device since you are testing it on a server just download the Ionic View app onto your desired device and test it out.

Configuration

Just because we are developing hybrid applications does not mean we don’t have to still specifically cater to each platform in some shape or form. I quickly found this out when using the Google Maps SDK.

When building with Android I had no problems and the map, locations and assets would be retrieved from the Google servers without an issue.

However when building for iOS the map would never display like so.

Ionic Google Maps Error
Ionic Google Maps Error
.

And after checking the network requests in the Safari there seemed to be no problems. With no errors logged after debugging and confirming that the map element is actually loaded I initially I thought this must be a style issue with the div map element but after some deliberation I found out in the Cordova documentation some extra information was needed in my config.xml file. specifically for iOS.

According to the docs , applications without any tags only have file requests from urls that are allowed.

Resources

When you are ready to build your application to production you will need to generate your image resources for your project.

We can do this using the command :

A lot of the time my original splash image wasn’t at the correct resolution to be transformed into various other dimensions for mobile tablet etc. Ensure that you can correct this as the resources step is required for building to iOS or Android.

For more information check out the resources in the Ionic Docs.

Serving your application

Whenever you use the command:

Your application is wrapped in a display for each platform. This is also the case if you use Google’s developer tools mobile responsive view, your application will render the components relevant to Android or iOS and even Windows.

While this is undoubtedly useful to preview platform specific components do not assume that the behavior here is representative of what will actually happen on an emulator or a real device.

This may seem obvious; however, I was initially confused by this as the -labs display resembles an authentic emulator. For actual emulators you can use Xcode for iOS or Android SDK Tools for Android applications.

So these are just a few of obstacles I encountered throughout my development time with Ionic. If you are looking for some valuable tutorials and resources, feel free to check out my previous post regarding excellent learning tutorials for Ionic.

Top Ionic Resources to Learn Hybrid App Development

WRITTEN BY GARETH DUNNE @JSDIARIES

Hybrid app development is an extremely fast growing niche. In particular, Ionic 3 is a platform that allows you to produce and distribute your app ideas to the market without having to specialise in iOS or Android development.

We can use the latest and greatest from frontend web technologies such as Angular 4 to power these apps. If you have previously read any of the Ionic content here, such as Creating a Google Map Place or Ionic 3 whats new? then none of this will be news to you. However, I wanted to list what I think is the highest quality learning content available now in relation to Ionic 3.

While there currently isn’t a proper Ionic 3 book to use as a learning resource. This Ionic 2 cookbook covers a wide range of Ionic developing basics and more.

Toptal also covers some common Ionic development mistakes here.

Content that is more practical than theoretical will always be a stronger learning asset so hopefully some of these will help to continue or start your Ionic development path.

Coursetro

Starting off with the Ionic related content on Coursetro.

I cant emphasis enough how much knowledge is gained from following any of Gary Simon’s Ionic related courses.

Starting all the way from designing a prototype in Adobe XD to implementing and developing your designed app using Ionic 3, no other content practically nails down the broader scope of full stack development by creating hybrid apps.

In particular, the course focusing on creating a gaming related app could not be more practical for creating a high quality application with solid functionality and purpose.

Just note that this tutorial in particular is behind a monthly subscription model, for one of the non premium app courses you can see the Wife Alert app which is not updated to Ionic 3 but the core fundamentals of Ionic are still there to learn.

Paul Halliday

Paul is one of the most prolific publishers when its comes to Ionic 3 content at the moment. He covers a plethora of useful Ionic 3 tutorial on his Youtube channel as well as some Udemy courses which I have no experiences with but if they are anything like his free content they are up to a very high standard of teaching.

I’m constantly learning new technologies that I can use in combination with the Ionic stack that would not know otherwise. On those terms, he is unmatched in the Ionic tutorial world.

Here are some of my favourites of his free content.

Joshua Morony

One of first Ionic tutorial publishers, Joshua provides frequent, useful and clear cut tutorials on his website and Youtube channel. There is an abundance of content that you can explore and he is up to date on the Ionic 3 front.

Joshua provides very good elements of clarity as he explains his content and has an impressive amount and experience publishing Ionic content.

Some great material here:

Raja Yogan

Raja has produced some very nice, lengthy and free content on Youtube. He provides very useful and fully fledged practical Ionic examples, usually in combination with Firebase.

I really enjoyed his latest chat application and encourage you to check it out, as its a fantastic series for building your own application using Firebase and Ionic. He is also a publisher who speaks clearly and teaches by example with no unnecessary theoretical fluff.

Exploring any of those publishers content is a great way to really get to grips with Ionic and Hybrid Web Development in general. All with their own different teaching styles, even spending a few hours will be more than beneficial to understanding various concepts for hybrid development.

Ionic 2 Hybrid Apps – Getting Started

Following on from some of our Angular 2 posts, the next logical step was to delve into the Ionic 2 framework to see what it has to offer.

 

What is Ionic 2?

Ionic allows the user to build Hybrid Mobile Apps. These apps are built with HTML, CSS, JavaScript and TypeScript and are contained in a native wrapper so the it can be installed and published on a mobile device, whether that be iOS or Android.

This is very advantageous for the developer as it allows him/her to create and publish mobile applications without having to be proficient in their native programming languages (e.g Java for Android).

You can always read up on it here.

Ever wonder where we get our icons from? Check out the Ionicons cheatsheet here.

Why Ionic 2?

Aside from the aforementioned hybrid mobile benefits there is quite a few things to get excited about here. Firstly, the documentation is very well laid out.

https://ionicframework.com/docs/

This allows us quick access to a multitude of structural components to use for an application.

For example, one of the most basic components, cards would use the following markup.

As you can see custom HTML tags can be used to generate this structure with outputting a result like so.

There is a whole host of different components like this with usage examples for most so be sure to experiment with different combinations

Getting started.

You’ll need to install the latest version of Node before installing Ionic. Once installed you will have open up your command line and type.

This may take a few minutes.

To create a blank new Ionic project in your current directory you should then use the command.

However, we also have other options to create our Ionic application. Ionic will generate some of the applications structure if we specify in a different command.

ionic-tabs-example
ionic-tabs-example

We can also generate a project that has a fully integrated sidebar using the command.

ionic menu
Generated Menu Start

Ionic menu sidebar
Menu Sidebar

These templates tend to be very useful when you want to scaffold a prototype as fast as possible.

Ionic Native

While the custom layout elements provide a variety of ways for you to creatively structure an application, the plugins or (Ionic Native) are also an extremely useful feature. They are a set of plugins that add native mobile functionality to your application. To install one simply use the command:

The plugin has now been added to the project. You can check it out in the plugins folder

Ionic Plugins Folder
Ionic Plugins Folder

Like most packages/plugins that you add in we have to import it at the top of the desired component where it will be used.

You can find a whole host of native plugins here.

I hope this post gave you an insight into how Ionic can benefit you for hybrid application development.

We’ll be sure to cover more interesting topics about it in our next post. Including how to publish to an application to the Android SDK. Be sure to have a look at our resource page for any other useful reading material.

Angular ngVikings Conference 2017

WRITTEN BY GARETH DUNNE @JSDIARIES

A Trip to the Nordics

ngVikings Building Inside

Following on from some of our Angular posts, we were itching to learn more. Where better to accomplish this than attending the most renown Angular conference in the Nordics?

The event took place in the IT University of Copenhagen. First of all, I would like to acknowledge how well thought out and structured this conference was. Going back and forth between two lecture halls was all that was necessary for the size of this conference. And the building allocated was the right fit.

Perhaps the most beneficial aspect of the event was the easygoing, relaxed environment it provided to network with other Angular enthusiasts. I know there are many who, like myself, are unable to to work with Angular in our day-to-day roles so to be able to be among a whole conference of like-minded people proved invaluable and motivating.

Before covering the guests in the talks, I would like to mention that the university itself was a sight to behold. The frozen-over lakes inside the university looked spectacular. This in combination with the incredible architecture of the university made it a fantastic venue for the conference and really solidified the Nordic feel. I’ll let the pictures do most of the talking here.

CopenHagen University Lake
University Lake
Copenhagen University Lake - 2
University Lake –  2

I’ll be focusing on 3  speakers in order to give you an idea what the conference was about.

Keynote: A Future Without Browsers

by Kenneth Auchenburg @auchenberg

One of the opening speakers, Kenneth, gave an insight into the future of specific browser based development(or lack there of).. You can find his slides here.

An increasing amount of the applications we are using will be able to obtain browser-like capabilities. The actual need to use a browser will diminish as time goes on. He demonstrated that originally browsers were designed to generate income through use or by providing browser start-up pages.

This is obviously not the case any more because we see that the functionality of a browser is paramount to daily web use. But as stated, this functionality is no longer exclusive to browsers.

Web applications provide just as much functionality as a browser and so the lines between the two become blurred.  An increasing amount of the applications we are using will be able to obtain browser-like capabilities.

The actual need to use a browser will diminish as time goes on. He demonstrated that originally browsers were designed to generate income through use or by providing browser start-up pages.

As web applications provide just as much functionality as a browser then the lines between the two become blurred. From this point Kenneth predicts that if any web application is a browser, then a new meta platform will inevitably arise; e.g. React apps are created and viewed using Facebook as its browser engine.

This future prediction alludes to the fact that the frontend developer role will become a more intriguing space to be working in than it already is.

It is something to be kept in mind in the future as new roles and responsibilities for JavaScript developers will inevitably be created by this migration of browser functionality .

Angular Material

by Tracy Lee @ladyleet

Material Design Pun App
Material Design Pun App

Tracy’s talk focused on Angular Material Design. While we have covered Angular Material on the blog before, I was really unaware of how powerful and seamless it is to integrate a quick materially designed functional layout.

She also has a informative series of posts setting up Angular Material here.

Tracy made an app on the fly that focused around animal puns which was quick to build due to the vast amount of readily available material design components.

Grids, sidebars, dropdown, indicators, popups, navigational components. These are all generated using a HTML tag attribute specific to the material design package.

Will generate a nicely coloured material design button.

Material Design Components
Material Design Components

For more on this you can see the component library here.

Overall, Angular material design seems to perform consistently fast as well as being fully optimized specifically for an Angular application.
I can already see myself using this to create an admin section of a website that is easy on the eyes with minimal effort.

To really simplify how Angular Material might benefit a development process, simply put, it allows you to build a structured grid quickly, with a wide variety of input components while also looking good in the process.

Angular of Things

by Uri Shaked @UriShaked

Angular of Things
Angular of Things

I was really fascinated with Uri’s talk. I had never previously seen an Angular 2 application interact with a piece of hardware. The ng-beacons not only looked great but also provided a new perspective of how Angular can connect to physical devices.

Uri also goes into more detail in his medium post here.

If you have any experience with physical computing, this was reminiscent of how a Arduino IDE would interact with an Arduino board to manipulate lights/temperature etc.

The beacon itself emits a low energy Bluetooth signal. Which is then outputted and detected.

The heat generated from the beacon is detected on a slider which is designed in material design.

ng-beacons temperature
ng-beacons temperature

3 volunteers were chosen to handle one of the beacons each. The heat generated from the participants moving was registered and updated in the sliders in real time over the Bluetooth signal.

You can find Uri’s GIT for the hot or not application here as well.

I really enjoyed this presentation. For me, it redefined how an Angular application can interact with a practical piece of hardware. I think there is a market for the ng-beacons within the Angular community as well.

ng-beacons bluetooth
ng-beacons bluetooth

There is currently no available way to purchase one of these beacons. But I’m sure the high niche demand created from the Angular community will enable this to be possible in the near future.

Although only three talks are covered here. A wide variety of Angular topics were covered throughout the duration of the conference. I hope this insight gives you an impression of what to expect next year.

The office hour segments in particular were extremely advantageous for those who took part in them.

If you missed the format of this, some of the speakers were available to speak to in an informal setting to give advice and answer your questions.

Special shout out to Leonardo @Zizzamia  and Mortem Kirstein @Mortenkirstein  for sitting down with myself @dunnedev and @mindinventive.

Both of them separately sat down with us and gave detailed explanations of a suitable freelance business model that coincided with our aims of being independant developers.

I’ll be sure to cover this in more detail in a future post. Be sure to keep an eye on ngVikings as its sure to expand bigger and bigger and become the cornerstone Angular event in Europe.

PHOTOS BY SEAN CORCORAN @mindinventive

Angular 2 – The future of component based JavaScript Frameworks

WRITTEN BY GARETH DUNNE @JSDIARIES

What is Angular 2?

Angular 2 is the latest in the growing trend of JavaScript frameworks for creating web applications. It is not an MVC framework but rather a component based framework that has been completely re hauled and revived from Angular 1. The key differences between Angular 1 and 2 are that Angular 2 is built with mobile support, heavy use of TypeScript and the $scope to glue the view and controller has now been totally removed.

The fact that Angular 2 is mobile-orientated allows Truly Native Mobile Apps to be built with technologies usch as NativeScript or Ionic.

Am I ready to learn it?

If you are eager to learn Angular 2 and have no previous experience with Angular 1 you are in luck! These frameworks differ greatly from each other so don’t be afraid to delve straight into it. There are, of course some prerequisite knowledge that I would recommend to have.

Backend

In order to create a practical application that would simulate one already in production, it is recommended to use a database instead of simulating data. You could use Node.js and MongoDB to accomplish this. By having a backend set up and ready to interact with you are enabling yourself to work on a application that is “true to life” or so to speak.

This isn’t totally necessary if you want to play around with Angular and create an application quickly. However, you will have to do this at some point as the scope of your application gets more complex so its best to establish what you will use at the beginning.

JavaScript

A good grasp of JavaScript fundamentals will obviously put you in a good position for starting an Angular 2 application. However, the real benefit of this is for the inevitable debugging sessions you will have to endure. In this case, knowing Vanilla JavaScript is extremely beneficial as the ability to trace and understand errors from the compiled TypeScript will allow you to solve problems much quicker.

I can’t recommend this JavaScript course any more:

https://javascript30.com/

Wes Bos builds 30 practical JavaScript things and with some latest ES6 practices. All these small applications built contain no additional frameworks or boiler plate code and they really indicate how much you can do without other libraries. Extremely useful down the line when debugging/implementing an Angular 2 application.

TypeScript

And who can forgot the beautiful TypeScript. Ah, bread and butter of an Angular 2 application. TypeScript is a superset of JavaScript and it allows you to write JavaScript in a class based or object oriented style. This code is then compiled to clean JavaScript output. This is why its important to know pure JS for debugging. Its hard to find a better introduction to TypeScript than this video by .NET Interview Preparation Videos

Similarly, if you were trying to find a more cohesive way to learn the basics of Angular 2 + TypeScript I would highly recommend checking this Angular 2 development book below by Yakov Fain.

You can also find Yakov’s blog here:

https://yakovfain.com/

You can checkout his training workshop here:

http://myflex.org/courseware/Angular_training_outline.pdf

MV* or Modular Architecture

If you have ever used a Modal-View-Controller or MV* system, then you will know the importance of separation of concerns . This basically means dividing your application’s business logic, data and visual markup into separate sections that are easy to navigate .  Angular 2 uses a component based architecture that would be comparable but not identical to this.

To create an Angular 2 component in your project directory run the command

or

You will now have folder called my-new-component or whatever name you specified.  

Generating New Angular 2 Component
Generating New Angular 2 Component

This folder containers the relevant typescript and styles files created in this folder. In order for us to link this new component into our app component we have to specify it in app.module.ts directives array in the @Component meta-data. We then need to put the selector of our new components into the first-apps template property in its meta data section.

App-Module Component Declaration
App-Module Component Declaration

Getting Started

Angular CLI

In order to use npm to download the Angular CLI package and install it globally on our local machine we need to install the latest version of Node.js .

You can install from their download page here.

https://nodejs.org/en/

Once installed we can type the command:

Installing this CLI allows scaffolding for our Angular 2 applications. You can see all the various scaffolding items you can create for the CLI here.

https://github.com/angular/angular-cli

Using the command:

Your project will be created in your specified directory. It takes all configuration and prerequisite steps such as:

  • Creating our app files
  • Configuring TypeScript and Typings
  • Adding script tags for
    • Angular2
    • Rx.js
    • System.js
  • Configuring System.js
  • Creating our Angular 2 component

Using the command line interface we must also install TypeScript globally on our local machine.

We will use typescript as a subset of JavaScript in order to the define the type of member variables and class method parameters used in our application. TypeScript supports new ECMAScript standards and compiles them to older targets of your choosing (such as ES3 or ES5 . This means that you can use features of ES2015 and forthcoming  versions with our Angular 2 application.

Other Versions?

So something to really try and get your head around are these will new Angular versions.  Google has stated that all forthcoming  Angular versions will be backwards compatible with Angular 2. Will Angular 2 be irrelevant in 6 months because of forthcoming versions in Angular 3 and 4? Well this depends. Angular 4 is the next major version released, not 3. The difference between Angular 2 and 3 will not be another full core change. These new versions will now be subsequently released twice a year. So with this backwards compatibility in theory, no version will be get left deprecated from Angular 2 but we’ll just have to see how this pans out.

So while these incremented versions do cause some differences in the architecture itself. What are we supposed to call Angular as its base name if it keeps getting incremented every 6 months? This is an ongoing discussion in r/Angular2

The future of /r/Angular2 — With Angular 4 now in beta and the adoption of semver, let’s revisit the unpopular decision to name this project Angular to begin with and where to locate our future reddit home. from Angular2