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.
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 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 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.
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?
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 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 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.
Do you use RxJava?
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.
I have come across this decision too and I think I have made up my mind about it.
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.
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.
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.