Blog

_{(Written by Doug Hoff/Centriq Training)}

The world of web architecture is undergoing its third major overhaul and there’s still more to come. This third version of the web development architecture is centered on the browser as a stand-alone engine so that mobile apps and desktop apps have little differences, developers can write an app and then easily use it on a desktop or mobile device or even embed it in a proprietary mobile app. This is what folks are calling a Single Page Application (SPA).

As web developers, we’ve discovered the benefits of having static pages, then having our entire web site be pre-processed by the server, and now, since jQuery gave us the confidence to move some of that UX processing to the browser, we’ve been slowly moving more and more to the client. But a client-side web app is a marriage to the browser and not just a date.

Angular’s popularity

In the last few years, the client-side processing world has matured, although you may think it’s still in its adolescent phase, but it’s showing enough promise and enthusiasm to garner attention from the big players out there. The buzz is concentrated around Google’s AngularJS web framework which manages a client-side set of views and handles some I/O. Microsoft thought well enough of it partner with Google to provide a much needed improvement for JavaScript called TypeScript. Google dropped development of a similar language and supported TypeScript as a primary language for AngularJS 2, just released in beta as of this January.

Angular also matured through five years of work to find a way to reuse web components like they do in other types of software. But the web is stuck with an amalgam of HTML, CSS, and JavaScript that requires the assistance of the browser to make it all work. And contending with the offline nature of mobile apps put a real wrench into traditional coding. We have to have our own database storage, routing features between pages, and communication with other servers. And we can’t hide behind those protective walls of the secure server.

Google has done a masterful job of keeping a framework both powerful enough to satisfy hungry developers for lots of complexity and customization but making it simple enough to be used by both designers and jQuery level developers. It’s got all the magic of RxJS observables (really? you’re still working on Promises?) but we see patterns to help us code easily with AJAX. AngularJS 1 had this problem of too much high-level architecture and a brick wall that kept them from adding some great features that we now get to have in Angular 2.

The only other major competition to Angular has come out of Facebook’s React framework. It has less buzz and more complexity than most developers need. Unless of course, you’re developing large systems like Facebook. But it looks like it’s still morphing into better versions and a few years will give us a better understanding of how to use it.

Working with status quo and my class

In business, there’s a need to keep moving ahead but still use the resources that have been paid for. The frameworks of .NET and Java still rule the enterprise web sites and in order to make Angular play well with these guys, it will take some thoughtful redesign. Remember that these server side frameworks do all the rendering of the web page before the page is sent to the browser. There on the browser is where Angular expects to do its stuff but it makes more sense to do secure data access back on the server and generate a page there for the most part. What we are looking for in a client-side application is to improve that and find the best of both worlds.

The improvements that we are able to get from Angular include the ability to improve the user experience through a faster page rendering. We also make gains when we are able to design a great reusable library of web components that designers just drop in to pages. Those can be excellent advantages if we learn how to trim back the features we’ve been using on the server and now concentrate on the asynchronous data access and microservices challenges before us.

For the last four months, I’ve been developing a class for my employer, Centriq Training, in AngularJS 2 and TypeScript that I think will meet the need of the business user from the component developer on desktop and mobile to the designer who thinks about the future of web components possibly using Google’s Angular Material. It’s been the most difficult course I’ve written.

It’s been a challenge since minimal documentation was available to start, other published material was poor except from the Angular developer community (God love you Pascal Precht and Victor Savkin), and documentation continues to be updated by the user community. The AngularJS 2 API docs have a lot of “WHAT IT DOES – Not yet documented”in them. But, hey it’s still beta. For the most part, it’s midway between the massive headaches of the patchwork packages without a framework I see with JavaScript solutions and the tried and true .NET frameworks.

I’m always seeing improvements and industry support which indicates that TypeScript/AngularJS 2 is going to be a leader for years to come. The editors I use are a delight. For free use and my class, it’s Microsoft Visual Studio Code, which has nothing to do with the Visual Studio editors for C# and other languages. (Do they know they are following in the footsteps of confusing Java and JavaScript?). That andJetBrains’ WebStorm are the best tools available so far.

If the transition to responsive design and mobile apps didn’t overwhelm you and you want to see how the next wave is going to improve things, it’s definitely worth a look to look at these mature products that will continue to have an effect on the web architecture for the next five years easily. Hope to see you in class!

Doug Hoff is an Instructor at Centriq Training. Subscribe to his blog Social IT Outbursts or connect with him at Linkedin.com/in/doughoff.