Learning Angular for Spring Developers

Learning Angular for Spring Developers

Full stack web development is a mouth full.

There so much to learn and so much to do and trying to keep up can seem very difficult.

Want to learn front-end development?

Well at some point in time you’re going to have to choose a front-end framework.

Now there are a ton of them out there and learning JavaScript and all it has to offer will be difficult.

Maybe you want to learn how to design the front end of smart phones, desktop applications and

web pages, that is all possible now being that the web is so diverse and multi-device orientated.

 

What is angular?

Angular logo

Angular is a front-end client based framework for building rich web applications.

Yeah… You’ve probably heard that ten times.

It allows you to build Single Page Applications relatively easily and quickly.

If you don’t know what a SPA is, take the Gmail web client for example. All of its content is on one page, using modals for different dialogs screens and so one, but everything stays on the same page and you don’t have to submit the page to the server and let it reload.

Imagine building a client application that is packaged into a single application that the user interacts with. All the different views are in one place, so switching between them is lightning fast as it doesn’t require a request to the server asking for page for navigating between each page.

So you can have a login view, that is attached to a component (more on this later) and that component will ask another type of component called a service to handle login requests to the server.

After that the Angular app switches to some main view to show the user’s dashboard.

What’s nice about this is that the app is doing all the navigation between the views, not the server.

More specifically, you have certain components in your Angular view be modularized. So your navbar can be a reusable component, you’re custom widgets can be a component. Anything can be a component…

Navigating between each view in Angular is called routing.

An Angular component is the model and controller aspect of a template. An Angular component is bound to a template.

And your entire application is made up of components, and a few more things…

 

What makes Angular so special?

The reason why so many Java developers are starting to learn front-end development is because of Angular.

I like Angular because of its separation from the crowd in terms of JavaScript. It borrows a lot of the features that you would find in your typical Spring web application.

I feel like the guys over at Pivotal secretly worked with Google on this one because how they’re so similar.

It feels like they had us Spring developers in mind when creating this framework.

I’m very excited by Angular and what it has to offer plus the ecosystem around it.

 

Let’s get started with separation of concerns.

Spring has MVC, Containers, Dependency Injection, Java Annotations and so on.

So does Angular!

It has very similar architecture for MVC with Controllers, Template binding and Services.

You can use dependency Injection to inject service based classes into your Angular components and there is support for template binding that is very similar to Thymeleaf.

Angular is made up of lot of little components. A parent component can have children and grandchildren components.

You’ll be working with components most of the time when using Angular.

In Thymeleaf you have fragments. You’re able to inject fragments into other templates to make up a full-page.

Angular components are in a way similar to Thymeleaf fragments. Angular will have a template that is bound to a component. That Angular component handles all the logic for that template.

You’ll communicate between the component and the template in a similar fashion as with SPeL.

Your Angular component may have an array of items. You can access that array within the bound template and iterate over each with Angular’s expression model.

 

Front-end frameworks everywhere…

Imagine writing a UI once and running it everywhere. Web apps, Desktop apps, Andriod and iOS apps.

Is that even possible?

Well it’s here, and quite popular.

I am invested in the idea and a lot of my time of learning HTML, CSS and JavaScript for designing UIs that work on your Andriod or iOS devices, in your web browser and on your desktop.
So you should master HTML, CSS and at least know JavaScript well. But there is an alternative mentioned below.

Let’s talk about the desktop

Have you used the text editor Visual Studio Code from Microsoft or Atom from GitHub? Do you like those text editors?

Yeah…
Well they are both written using HTML, CSS and JavaScript. Although Visual Studio Code adds TypeScript to it and native C# libraries too for their intellSense pop ups.
But you can build a desktop application using JavaScript!
Electron Logo
Github created Electron which uses the Chrome rendering engine and Node.js and packages them together to create HTML, CSS, JS based apps with Node.js for low-level system calls.
This great because you can build your Angular web application core, make some tweaks and it now runs on the desktop.
We’ll you won’t have to make any tweaks really because it’s a web-based application.
What’s great about Node.js is that it offers low-level system APIs provided as JavaScript (Node.js is a JS runtime) and you can write to files, use the TCP/UDP networking API for network stuff…
This forms a level of abstraction that a lot of Node.js based frameworks run on top of.
A little about Electron…
Electron is not a 3 tear based web application (client -> server -> database).
Each of these, well at least the client and server communicate via JSON or XML over HTTP method calls…
This is called a RESTful API.
Electron removes that aspect, where as you have the client (your web-based application) and instead of it making requests, it just calls Node.js’s methods using EventListeners.
This same pattern is with Java Swing and JavaFX, but now we’re removing away the need to learn these other framework because the web view is such a universal and diverse canvas. So why not master it?

The cool thing about the Electron ecosystem is that is not just a web view and some processing logic with Node.js, there are actual plugins that you can use to integrate with the System’s UI for that current OS you’re running on.

Maybe you don’t want the standard Windows title bar, okay remove it and then create your own. You can still add in the drag and drop functionality.

You can custom style your Electron application how you like that suites the system that it’s running on.

But you can still get the look and feel of Windows if you’re running on Windows or the same for Mac.

How about smart phones?

For smart phone development there are few alternatives for using front-end web frameworks like Angular.

Check out awesome-android for the full list.

Apache Cordova logo

Apache Cordova is the platform for running your JS based applications on popular smart phone devices.

You can take a web application like Angular and package it to run on Andriod, iOS and many more smart phones

The Ionic framework is built around and sits on top Angular provides features that try to make the UX feel more natural to the user and the specific device, features like push notifications you’ll see if you get a new text message will feel more natural to the device you’re using.

You can now essentially write once with JavaScript and compile to Android and iOS applications.

You can make use of system resources such as the camera, GPS, bluetooth and so one…

Take Electron and Ionic for example.

For example you’re building a chat application that works on Andriod, iOS and all of the major desktops.

Well you can write you core logic once and for mobile applications you can build on top of that using Ionic and Adobe PhoneGap.

Now you want you port that to the web, but still have the Ionic look, you can do that too.

How cool is that?

Learn HTML, CSS and Angular and your UI options are near endless. You don’t have to learn JavaSwing or JavaFX, or Andriod Layouts and controls.

You have the freedom to learn the universally accepted HTML and CSS you’re all set. That’s why it’s so valuable to learn front-end development because you can transfer your skills to almost any platform.

It’s amazing how you can easily create a web app and then port it over to smart phones and desktops applications.

 

Meet your new friend, TypeScript

TypeScript is awesome because it uses types like string, number, etc and adds the OOP aspect with classes, interfaces and Generics.

It was created by Anders Hejlsberg who also know for co-creating C#, creating Delphi and Turbo Pascal.

And it’s super easy to pickup and learn.
Mastering JavaScript is plain difficult, there is no question about it. Kyle Simpson, author of You Don’t Know JS explains JavaScript in-depth with this series of books.
Because trying to understand JavaScript well enough is going to take a long time, I would recommend that you learn TypeScript as a superset that wraps over all the odd and difficult parts of JS.
Matt Raible coined TypeScript as ECMAScript++ because it adds interfaces, generics and other cool features.
If you don’t know ECMAScript (ek-meh-script) is the specification of JavaScript.
Kind of like JCP is to Java.
Angular is built using TypeScript and it’s only dependency is RxJs (more on that in the next section).

Do you use RxJava?

ReactiveX RsJS logo

Don’t you love how seamlessly it fits into your application and make your life a lot easier?

The concept of Reactive asynchronous programming was difficult to pickup at first but once it clicks with you, you don’t want to go back.

ReactiveX has many ports of RxJs, commonly RxJava. The concepts and principles are still there but some of the methods are a bit different for each platform…

Anyway, Angular uses RxJs quite a lot in the framework. Near everything returns an Observable and you can convert those into Promises if you’re using Promises.

So if you don’t use either RxJava or RxJs, you need to learn those while learning Angular.

 

How to learn Angular?

Learning Angular isn’t as difficult as it may seem. I started one week ago and I learned the how to build applications using a majority of the framework’s features.

To best approach to something learning is to master the basics first as there is only a handful of them.

The Angular Docs team does a great job demonstrating most of these features while building an application in a joyful and pleasant way.

Later, you should you go and study the docs for a deeper depth of information.

I’d recommend you watch a crash course video that goes over most of its features so you can get a surface level understanding of how the fundamental features work.

A good video to check out is this crash course.

Start building your heroes app over at Angular.io tutorial.

 

Java or JavaScript?

You might be thinking, well if JavaScript is so popular, why not just drop Java and learn JavaScript.

I have come across this decision too and I think I have made up my mind about it.

So there is a lot to going on the in JavaScript land.

That’s why I think you should focus your UI and design efforts only with web-based technologies because how they’re spreading so much but still have the reputation and knowledge as a Java developer for building web services because of the power that Java offers.

You can still call yourself a Java expert if you know the language features well, understand Spring and a handful of libraries, all the cool things that make Java development easier.

Learning bigger frameworks takes time. So it’s okay if you other popular Java frameworks, Elastic Search notably.

What I am saying is, for any technology really, knowing the deep low-level stuff and the nitty-gritty is going to take time and counts on your experience.

So why not learn both?

Yes you should cut a lot of the fat away and lean down because you simply can’t learn it all.

There is no point in learning JSP or JSF really, because (arguably) there isn’t a reason too although still used, they are considered dead in today’s evolution.

Yeah, DVDs and Blu-rays are cool and all but Netflix is better…

A vision I have is to have the knowledge for designing and building highly scalable and beautiful web services with Java.

A lot of your foundation knowledge will go into that like your design patterns and PoEAA

The added benefit of learning UI design is that you can too better understand front-end engineers, but more importantly you can become an independent full-stack web developer.

If you have spent all this time learning Java like I have, don’t throw it away, although it’s easily transferable.

Yes you can do server-side scripting with JavaScript on Node.js but I personally wouldn’t count on it.

This is my personal opinion but the foundation and tooling isn’t as mature as Java is. Although you can accomplish a lot of the things that you would with Java using Node.js, so why would you need too when you have Java?

Learning font-end development is a new skill that you have the freedom the choose whatever framework you want to use.

You may learn Angular and want to move onto the up and coming React.js which too is also nice.

So you really have the freedom to use whatever you’d like, but I’d recommend Angular over React.js as the learning curve is a lot easier.

 

JHipster…

JHipster Logo

Another thing that has popped up in recent years is JHipster.

It’s very nice and easy to use generator for Spring Boot and Angular apps. It’s make it so easy, really.

You can specify all aspects of your project using the CLI.

You can generate a nice pre-made project from a monolithic or microservices based architecture.

I would recommend this guy if you’re starting out, because you can read over the project and get a better feel for good practices from another perspective.

Check out JHipster.

Adrian van den Houten

I'm Adrian van Houten, founder of ScholarCoder and a passionate software developer for full-stack web development. Read more about me here.