Centriq Training Print Logo

Sunday

January 29 10:46 AM


Blog Banner Graphic

Blog

The new web with AngularJS 2 & TypeScript – a browser marriage, not a date

The new web with AngularJS 2 & TypeScript – a browser marriage, not a date

May 6, 2016 in Corporate IT Training, Web Development / by Centriq Training

(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 HoffDoug Hoff is an Instructor at Centriq Training. View Doug’s bio at Centriq.com/Doug_Hoff, subscribe to his blog Social IT Outbursts or connect with him at Linkedin.com/in/doughoff.

Start Date
End Date
Day/Eve
Break Weeks
Track
Jan 23, 2023
Jul 27, 2023
Eve
4/3/23-4/7/23
5/22/23-5/26/23
7/3/23-7/7/23
CSSP-V
Jan 30, 2023
May 5, 2023
Day
3/6/23-3/10/23
4/10/23-4/14/23
CSSP-V
Feb 6, 2023
May 19, 2023
Day
3/27/23-3/31/23
FSCP-V
Mar 20, 2023
Jun 23, 2023
Day
4/24/23-4/28/23
5/22/23-5/26/23
CSSP-V
Apr 10, 2023
Jul 28, 2023
Day
5/29/23-6/2/23
7/3/23-7/7/23
FSCP-V
Apr 24, 2023
Oct 19, 2023
Eve
7/3/23-7/7/23
8/21/23-8/25/23
CSSP-V
May 8, 2023
Aug 11, 2023
Day
5/29/23-6/2/23
7/3/23-7/7/23
CSSP-V
May 15, 2023
Dec 14, 2023
Eve
7/3/23-7/7/23
9/4/23-9/8/23
11/20/23-11/24/23
FSCP-V
Jun 19, 2023
Oct 6, 2023
Day
7/3/23-7/7/23
9/4/23-9/8/23
FSCP-V
Jun 26, 2023
Sep 29, 2023
Day
7/3/23-7/7/23
8/7/23-8/11/23
CSSP-V
Jul 24, 2023
Jan 25, 2024
Eve
10/2/23-10/6/23
11/20/23-11/24/23
12/25/23-12/29/23
CSSP-V
If you don't see the Cohort Start date you are looking for don't forget to check out our campus calendars.
CSSP-I: Cloud & Security Specialist Program (In-Person Modality)
CSSP-V: Cloud & Security Specialist Program (Live Virtual Modality)
FSCP-I: Full Stack Coding Program (In-Person Modality)
FSCP-V: Full Stack Coding Program (Live Virtual Modality)
Please note that Centriq will be closed on the following observed holidays: New Year’s Day, Memorial Day, Independence Day, Labor Day, Thanksgiving Day, the day following Thanksgiving Day, and Christmas Day.
Start Date
End Date
Day/Eve
Break Weeks
Track
Feb 13, 2023
Mar 19, 2023
Day
3/20/23-3/24/23
4/17/23-4/21/23
CSSP-I
Apr 17, 2023
Jul 21, 2023
Day
5/22/23-5/26/23
7/3/23-7/7/23
CSSP-I
Jun 5, 2023
Sep 8, 2023
Day
7/3/23-7/7/23
8/7/23-8/11/23
CSSP-I
Jul 31, 2023
Nov 3, 2023
Day
9/4/23-9/8/23
10/2/23-10/6/23
CSSP-I
Sep 25, 2023
Dec 22, 2023
Day
11/20/23-11/24/23
CSSP-I
Nov 27, 2023
Mar 1, 2024
Day
12/25/23-12/29/23
1/29/24-2/2/24
CSSP-I
If you don't see the Cohort Start date you are looking for don't forget to check out our online instructor-led calendar.
CSSP-I: Cloud & Security Specialist Program (In-Person Modality)
CSSP-V: Cloud & Security Specialist Program (Live Virtual Modality)
FSCP-I: Full Stack Coding Program (In-Person Modality)
FSCP-V: Full Stack Coding Program (Live Virtual Modality)
Please note that Centriq will be closed on the following observed holidays: New Year’s Day, Memorial Day, Independence Day, Labor Day, Thanksgiving Day, the day following Thanksgiving Day, and Christmas Day.
Start Date
End Date
Day/Eve
Break Weeks
Track
Jan 16, 2023
Apr 21, 2023
Day
2/2023-2/24/23
3/20/23-3/24/23
CSSP-I
Jan 23, 2023
Jul 27, 2023
Eve
4/3/23-4/7/23
5/22/23-5/26/23
7/3/23-7/7/23
CSSP-I
Feb 27, 2023
Jun 2, 2023
Day
4/3/23-4/7/23
5/1/23-5/5/23
CSSP-I
Apr 10, 2023
Jul 14, 2023
Day
5/15/23-5/19/23
7/3/23-7/7/23
CSSP-I
May 22, 2023
Aug 18, 2023
Day
7/3/23-7/7/23
CSSP-I
Jun 26, 2023
Sep 29, 2023
Day
7/3/23-7/7/23
8/7/23-8/11/23
CSSP-I
Aug 7, 2023
Nov 10, 2023
Day
9/4/23-9/8/23
10/9/23-10/13/23
CSSP-I
Sep 11, 2023
Dec 15, 2023
Day
10/16/23-10/20/23
11/20/23-11/24/23
CSSP-I
Oct 23, 2023
Jan 26, 2024
Day
11/20/23-11/24/23
12/25/23-12/29/23
CSSP-I
Dec 4, 2023
Mar 8, 2024
Day
12/25/23-12/29/23
2/5/24-2/9/24
CSSP-I
If you don't see the Cohort Start date you are looking for don't forget to check out our online instructor-led calendar.
CSSP-I: Cloud & Security Specialist Program (In-Person Modality)
CSSP-V: Cloud & Security Specialist Program (Live Virtual Modality)
FSCP-I: Full Stack Coding Program (In-Person Modality)
FSCP-V: Full Stack Coding Program (Live Virtual Modality)
Please note that Centriq will be closed on the following observed holidays: New Year’s Day, Memorial Day, Independence Day, Labor Day, Thanksgiving Day, the day following Thanksgiving Day, and Christmas Day.