Styled Components – Future Reusability

Styled Components
Styled Components


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:


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.


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


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..


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.


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.


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


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.


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.


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


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.


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.


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.


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.


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.


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


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

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.

Ionic 3 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.

Ionic Cordova 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 Ionic 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


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.


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.

Angular 4 News Roundup June



June has come and gone and it has brought with it a steady month of Angular 4 news. There is a chance that you could have missed a change to key features or components so I’ve listed some of the main snippets of news that may have passed you by.

Although there isn’t much reading material specifically for Angular 4 I recommend having a look at ng-book: The Complete Guide to Angular 4 here.

Its updated with Angular 4 practices and is one of the few books doing so.

Angular 4.2

The most notable piece of Angular news this month is the release of Angular 4.2. This is a small update and will not break your current Angular projects via Semantic Versioning which I covered in a previous post here.

All changes pertaining to the release are mentioned on the official blog here. So what are main highlights we should take our of this update?
Well, the changes to allow the creation of reusable animations using the animation() function enables our animations to become more modular.

I’ve listed a very similar example as the docs here for reference.

As you can see we assign our animations to a variable, specify its animation properties and then invoke it using the useAnimation function

Typescript 2.4

Typescript has also updated to a new release, bringing with it dynamic import expressions as well as Safer callback parameter checking. There could be few posts written about these changes so I’ll let the official blog post do the talking here.

I’ll just note that the dynamic imports feature in particular is a fantastic addition in this new release. It allows an even deeper layer of lazy loading and enables Webpack to split your bundles even further to only load a particular asset required in a function.

Angular IO

In order to coincide with Angular 4 features and benefits, the official website has now been converted to a full scale web application. It is now much faster and has increased its performance significantly.

There is also a satisfying element of practice what you preach and the Angular team have clearly rebuilt the website from the ground up with performance in mind.

It may seems like a minor detail but searching through the documentation has now become a better user experience which I’m sure is appreciated throughout the Angular community especially for those browsing on mobile devices.

These were the main notable Angular events and features this month. The framework is progressively evolving every month and if theres enough newsworthy item in July I’ll be sure to do a similar roundup.

Still looking to upgrade your AngularJS app to Angular 2? Check out this tutorial by Toptal here.

Angular 5 HTTP using Observables – Part 2


Angular 4 HTTP & Observables

In this part of the tutorial we will be focusing on our API calls and how they interact with the BreweryDB API.

Again, if your looking to expand your Angular and Typescript knowledge I highly recommend this Angular & TypeScript book by Yakov Fain.

You can see the final version of what my beer app is here.

Angular Proxy & CORS

First up, in order to get data from the BreweryDB API we want to enable CORS (Cross Origin Resource Sharing) in our browser.

To accomplish this we have two choices:

The easiest option here is to install a CORS Chrome extension here.

This will enable you to perform cross origin shares in Chrome without having to setup a local proxy. This is handy for testing an application locally but would obviously fall short if pushed to a production environment or hosted externally.

The second option, which is something I would encourage you to do is to setup a local proxy. This will allow you to easily enable cross origin resource sharing for all your browsers and doesn’t take long to create.

To do this lets first create a proxy.config.json file in the root of our project directory.

Proxy file location
Proxy file location

This is our proxy API json object. It contains properties that allows our calls to send and receive data to the Brewery API.

However, it won’t work without running the proxy file alongside our application. So we will need to execute this command to start it alongside our application.

Mapping Data to TypeScript Interface

Next, we need to create a beer view model. This will basically act as an interface for our retrieved data. Properties such as name, description and rating will feature here.

In your app folder create a file called beer.ts and put in the following.

This is only a basic version of the actual beer data returned to us by the BreweryDB API.

The data response contains a lot more properties than this but you can always customize the interface to match the data you desire to use in your UI.

We can now import our Beer type definition to any of our components to reference the data retrieved from BreweryDB.

This is a pretty common thing to do when using TypeScript and making HTTP requests for data.

This is also a benefit of using some of the object oriented aspects of TypeScript.

It allows us to code defensively and ensure that we have the exact data properties that we need for the project. Otherwise it will throw a Type error and you can adjust the type definition accordingly.

Get the Data using Angular HTTP Object

We now want to implement a method that retrieves all beers from our Beers API.

Open up beer.service.ts and change it to the following.

So we now have a getBeers() method and a handleError method for our API calls.

In the first condition we check if the this.result variable already has a value:

This is an important step because our service shares permanent data throughout our application so if the application has already been loaded then there is no point in making the getBeers() API call again as the data is already cached in the our browser/service to be used.

We then take the _http variable of type HTTP that was created in our constructor:

And then invoke the get method using our beer API url details as the parameters for it.

The next line:

Takes the response from the Beer API server and maps it into a JSON array for us.

This will allow the data to be reactive. We will come back to this.

This line has a similar function. It allows the Observable returned by the HTTP get request to keep its connection open, this will allow the data source to be reactive.

We also will catch any errors here:

This line will catch any error from our request and run the this.handleError function.

All you really need to know about this function is that it will filter down through the error message to the point where it will usually be the most informative. Usually, a detailed HTTP code error or something associated with that code.

Observables Ready for the UI

If you noticed some of the variables declared above the constructor, at the top you should see:

These are both core Rxjs features that will allow our data to be reactive. We will come back to these but for now just think of them as reactive variables that we will using later on in our home.component.ts .

Retrieving the Angular Data

This is the basic version of our service set up with the functionality to retrieve an initial list of beers. It gives a good overview of how our service will share data. However, this on its own will not do anything without using it into one of your UI components.

We will be doing this in part 3, for now think of this service as a piece of functionality that will share data throughout the application, the data will be made reactive by using Rxjs Subjects and Observables which are declared at the top of the file.

Angular 5 HTTP using Observables – Part 1


Angular 5 Data Binding

One of the more advanced aspects of frontend development to know as an experienced UI developer is the creation of reactive data sources.

No matter what kind of data you want to show your user, in order to take advantage of web applications you should really have your data be dynamic and reactive.

In comparison to libraries like React.js, Angular 4 enables you to create data that is shareable to all of your UI components via a service .

In Angular,  we can use Observables and Subjects to make this data reactive and as a result refresh our UI. This is achieved by using an external reactive JavaScript library called Rxjs.

I won’t be going into too much detail on what goes on behind the scenes of the Rxjs library but just know that it is an important aspect of using data in the Angular project.  In this tutorial I will demonstrate how to use it as dynamic data retrieving tool.

And while Rxjs is also available to be used with React, in my personal opinion it is much easier and it better fits the architecture to be used in combination with Angular 5.

Redux is more commonly used in combination with React for the data flow and state management of a project but the details of that can be found in another post here.

In this tutorial, I want to demonstrate how you can make your own reactive data source using BreweryDB’s APIs. I also want to show how modern frontend frameworks like Angular allow us to create seamless user interfaces that respond to the changing of data.

In this part, we will just start with setting up the project.

On a side note, if your looking to expand your Angular and Typescript knowledge I highly recommend this Angular & TypeScript book by Yakov Fain.

This tutorial series is based on my application Beer Name Finder which you can view here:


If you enjoy this dashboard, please consider giving it an upvote on Product Hunt here.

I took the designs and styles of this application from Coursetro’s MEAN stack tutorial and was able to implement a service for interactions with the data and the Brewery API.

Angular Observables

As this tutorial will be broken down into a few posts, you can see the source code in the GIT here.

Brewery API

In order to retrieve data from a source via HTTP we will use the Brewery API. This will at least keep our data source interesting and offer plenty of different data options to be displayed.

Navigate to the developer API section here.

Brwery API Menu
Brewery Applications

After signing up for a developer account, create a new application with whatever details you like.

Register New Application
Register New Application

The documentation is quite verbose and you can find a wide variety of different ways to query the api for specific beers.

You can also test the results of any api calls via the api explorer. This is useful for when you are testing different query parameters to retrieve specific datasets of beer information

API Explorer
API Explorer

For now, we just need the api key generated by your app. This will be needed in order to make a http request to the Brewery API server so store this somewhere to reference later on.

Angular 5 Install & Setup

In order to progress from here we need to have Node.js and the Angular CLI installed.

I’d recommend to getting started by watching this video by Gary Simon from Coursetro who details the installation steps.

Once set up from the instructions of that video, we need to scaffold the structure our Angular application. This is very easily done through the Angular CLI.

Open up the terminal or command window and in the current directory we want to generate the project with the styling scss flag.

We have now generated a Angular project with a solid SASS styling structure. This step is of course optional depending on your CSS preprocessor preferences.

If you want to style the project with normal CSS that is fine too.

Angular 5 HTTP Service & Home Component

Next, lets generate our home component. This is a component that will contain all of our UI for displaying all the beer data requested from the BreweryDB API.

From here, we want to generate our service that will hold all the logic for retrieving data that can be shared with any our components.

This is a service that contains all our methods that we will use to request data from BreweryDB’s APIs. When you open up this service you will see that the Angular CLI has automatically injected a HTTP object into the constructor for us.

Lets modify this service so it now looks like this.

The HTTP object in the constructor will be used to make the HTTP requests to the BreweryDB APIs. Meanwhile, we have added all the necessary imports in the top of the file that we will need later on for this service.

Angular 5 Setup Complete

This is our basic structure set up. In part 2 we will add our API calls to our beer service.

Ionic 3 – HTTP Requests – Retrieving a Photo from a Google Place


As I become more comfortable with Ionic 3 and its functionality, I wanted to share how to connect to the Google Maps API, retrieve a specific place and then to request a photo from that requested place.

In doing so, you will then know how define a HTTP object using TypeScript and using ES6 Promises in order to make a callback function that requests the photo using that HTTP object.

This functionality stems from an app that I made called CoffeeTrail.

Android Coffee Finder Application CoffeeTrail

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

Setup Project

As always we can generate our Ionic 3 project using the command

We then want to generate our locations provider.

This is a provider that contains all our methods that we will use to request data from Google’s APIs. When you open up this locations provider you will see that the Ionic CLI has automatically injected a HTTP object into the constructor for us.

This is the object we will be using to make the requests.

We will also generate a location-details component that will display our requested images.


In order to have access to multiple API calls in our app we need to request a developer API key for Google Maps.

You can generate one by going to this page and clicking Get A Key , This is required for all place and photo requests and won’t work without one.

Google API Key
Google API Key

Get Place

We will create a getLocation method that will accept latitude and longitude as parameters.

We utilize a ES6 JavaScript Promise that will use the http object created in our constructor in order to make the request along with the details of the location which you can change for your own personal preferences.

You will of course have to reference the API key that you created earlier on in the apiKey variable of type string..

This Promise will return true or resolve when the the request has been completed and the data has been returned. The results of the data is mapped to a new json object which we assign to the variable through ES6’s arrow functions .

This data will be resolved/returned when we call it in our location-details file.

We also can add the getPhoto method.

This will take in a photo reference string as a parameter in order to a retrieve a specific photo based on the location from the locations/location returned from our getLocation method.
So how do we get the photo reference from the data set returned from getLocation? Well we can do this in the locations-list file.

Display Photo

Our location-details.html file should look like this to display the retrieved image of the location.

Notice how we use the async pipe with the current image template variable.

This is because some asynchronous data objects can be a bit tricky to display without async pipe. The data source is an Observable that contains an array so using the async pipe secures it so to speak.

We then use the ng-template (which is new to Angular 4) syntax to display error text if no image can be retrieved.

So in our location.details.ts file we need to use our getLocation method in order to get a place and then to send a photo reference from that place to the getPhoto method.

This is just one way to retrieve data from an API in an Ionic application. The use of Angular 4 in an Ionic 3 project enables a developer to makes a request for some data and then to easily share that data throughout the rest of the components using a service or in this case, using our location.ts. provider.