Category: Angular

Angular 2 – Staggeringly Ambitious

By now, most readers know a little about the motivations and features of Angular 2.0. Here I recap them briefly, these are ideas I have seen Angular team members say in conference talks, mixed with others I have inferred.

  • Performance, and design/API changes needed to achieve it.
  • Accommodate the changing web development environment, including Web Components.
  • Embrace JavaScript / TypeScript / Dart progress.
  • Replace Angular-specific features with web platform features.
  • Dynamic Loading, especially for faster mobile startup.
  • Easier learning curve, though it is unclear how well this will pan out, given the large pile of dependency technologies.
  • Scale up to complex applications effectively.
  • Excellent tooling support, which again helps scale up development teams.
  • Server-side pre-rendering – SEO Friendly and mobile friendly.
  • Server-side template compilation (as a build step), for faster application start.
  • Leverage web workers – ideally this will be trivial, for use in almost any application.
  • Leverage RxJS, make it nearly as easy to create an end to end real-time/reactive system, as it was to create a old-fashioned manual-update application with the older tools.
  • Retain the large-scale corporate development appeal which AngularJS 1.x has enjoyed.
  • Keep up with the competition! React, for example.

Putting all this together, my assessment is that Angular 2 is staggeringly ambitious. Not for any one goal (most of the goals and features above, are present in at least one competitor); but rather, it takes ambition to combine all of the above into one framework, then to drive that framework to completion fast enough for all of these things to be of current interest.

But, will it work?

At Oasis Digital we have been following the Angular 2 alpha versions for months now, and we have multiple applications underway on Angular 2. We know customers who are already deep into production application development on Angular 2. We have taught “early start” classes on Angular 2, and have our curriculum well underway to teach full-length “boot camp” classes. We were thrilled to see the beta version ship earlier this month.

From all the above, and studying some of the competition as well, it seems likely that Angular 2 will achieve its technical ambitions.

Hazards

There are some risks and challenges facing the Angular 2 team, they are well aware of these and working hard.

Size: So far, as of beta.0, Angular 2 has surprisingly substantial code size. There is work underway to trim this, but the extent of success is to be determined. Code size might be the unavoidable cost of ambition.

Dependency size: Angular 2 has mercifully few dependencies, but one of them (RxJS “RxNext”) is important, powerful, and large. This can be minimized by including only the pieces of Rx that a given application actually uses, but a complex application written using Angular 2 and much of RxJS will, unless things change greatly, end up with a big total code size.

Development pace: because Angular 2 is so ambitious and large, it has also taken a while to build. The competition has not stood still, so there is risk that by the time Angular 2 is fully out the door, it may have fallen behind in some key area. This risk is much more well-managed now that the product is in beta.

Innovation: There are other alternatives out there, radically different and with some chance of being radically better. Imagine if, for example, something like Elm were adopted by one of the major technology companies.

Style and preference: for good reasons, Angular 2 has a split between code and template. This design choice has served version 1 very well, and while there are technical reasons to choose between a code/template versus an all-code, that choice is also to a significant extent a matter of style, preference, and fad. If the prevailing preference moves toward and all-code approach, this could be a challenge to Angular 2 adoption.

Place Your Bets

There is no sure thing, and there are significant unknowns and hazards. But I will step out on a limb with the following (scoped) prediction:

For “enterprise” applications, which primarily run behind a firewall, contain extensive functionality, and are developed by large teams, Angular 2 will turn out to be in the top two JavaScript frameworks over the next five years.

 

Expert Angular Developer-Trainers Wanted

Here at Oasis Digital, a sizable portion of our work revolves around AngularJS and soon Angular 2: writing software, reviewing software, consulting, teaching classes. Our Angular classes are described in detail at AngularBootCamp.com – as you can read there, our classes are taught by professional, expert developers.

Our Angular classes have proven quite popular – to meet our customers’ needs, we plan to hire additional developer-instructors.

Requirements

  • Extensive experience with AngularJS, deep familiarity with a broad range of its features.
  • Work history predominantly as a software developer and leader.
  • Experience presenting to groups of people: in a classroom setting, in technical talks, or similar.
  • Interest in teaching.
  • Experience with a broad range of software technologies, on both the client and server tiers. Our training engagements sometimes include a consulting element, working closely with our customers’ developers to understand how Angular fits into their overall solution.
  • Availability for travel to customer sites, etc.
  • The usual legal requirements, such as the right to work in the United States (and possibly elsewhere)

Full-time or Occasional Contract

Our classes are mostly taught by our full-time developers. If another developer/instructor joins us full-time now, they would need to be ready for a busy teaching schedule (though still leaving time to write software).

We also welcome applicants currently working as independent AngularJS consultants/contractors, interested in teaching classes from time to time. Such contractors would also need to devote time to interact with our core team, to build the shared deep understanding of Angular that our customers have come to expect.

Contact us

If this sounds right for you, please email us – see our contact page. Even if you are not ready to jump in right now, feel free to get in touch about the possibility of future work.

 

Angular Firebase Observable – Simple Weather Example

In preparation for Angular 2, we have been digging into its capabilities extensively. One of the most interesting areas is around Observables, as mentioned in a blog post and video a couple of weeks ago. Here is more along the same lines, this time using Firebase.

Source code:

https://github.com/OasisDigital/angular2-firebase-observable-weather

This is intentionally a relatively straightforward and simplistic example – it uses Firebase, but you are unlikely to see any data change in “real-time”. Rather, the point of this example is that even when not expecting data to change, with Angular 2 it is hardly any more work to implement “push” updates.

Creating a 3D Configurator with ThreeJS

(Maneesh Tewani was a summer intern at Oasis Digital in 2014, and returned to lead the Summer Intern Program in 2015. As of this posting, he currently attends Purdue University. Maneesh recently wrote this technical description of a 3D project which was started by interns, and first documented, in 2013.)

Introduction

“Swingset” is a custom rules-based configurator. It allows users to customize their own swingset given a set of options to choose from. When an option is selected, the change can be seen on on the 3D swingset shown.

swingset-1

The web app was built primarily using HTML, CSS and JavaScript. Alongside the JavaScript we utilized JQuery, AngularJS and ThreeJS. JQuery is a library that provides extra tools in selecting and manipulating HTML and CSS. Angular, its counterpart, is a popular framework that allows manipulation of the DOM driven by data-changes. ThreeJS, which utilizes WebGL, was very important in this application. WebGL allows 3D rendering in the browser and its framework allowed CPU-Intensive tasks to happen without very much CPU usage.

swingset-4

Build Tool

Swingset uses Broccoli.js, a build tool provided by the npm registry. Broccoli is very similar to Grunt and Gulp. Instead of working with “globs”, Broccoli has its equivalent “trees”. Initially we believed Grunt.js was the ideal choice, but as time progressed, we experimented with new tools and picked up Broccoli. Our use was relatively simple: process all our files, move them to a directory, and serve them statically.

Broccoli served this purpose very well. For example, Broccoli is known for its automatic “watching” feature. Watching is when a build tool keeps checking a specific directory for changes such as updates, additions and removals. This is very useful because as developers are writing code, they want to see the changes live on their local server. This can usually be quite a hassle, but Broccoli has this unique feature built-in.

swingset-3

Node.js

Node.js is a tool that allows you to write server-side code in JavaScript. It comes prebuilt with NPM, which unofficially stands for “node package manager”. NPM allows you to easily deal with server-side dependencies. Without Node you can’t have build tools such as Broccoli or Gulp.

Directives

Directives are a key feature in AngularJS. Directives allow you to take a common snippet of code and extract it for future use. Directives are represented by their names and every instance of one represents a template or HTML code. Directives are very flexible and therefore can be used practically anywhere.

ThreeJS

One of the most important components of the application is the scene. The scene consists of the swingset and the components around it. The main parts of a scene are the position and lighting, in addition to any object you would like to add. In our case, that was the swingset optimized with different textures laid upon it.

The model directive sets up ThreeJS model to make the 3D swingset appear. First, an ObjectLoader is initialized with an image. Next, a scene is created with the image and a camera as well as multiple types of light. Then, the controls are created that allow the user to manipulate the scene/view. The renderer basically renders the scene along with the controls, lighting, etc. Upon initializing, a Canvas HTML element is returned. In our case, most of the boilerplate code was written in the directive. So, we append the canvas element to the directive element.

An ideal part of this was updating the scene to match the user’s selections. This was where we used AngularJS. As everything was set up, many variables were bound to the scope, meaning that as anything on the scope changed, the corresponding changes would be provided to ThreeJS.

 

Dependency Injection in Angular 2.0 (alpha) – Angular Lunch

Another in our series of Angular lunch talks. Paul Spears walks through dependency injection in Angular 2.0. This covers an alpha version, the details could easily be different when the real thing ships. Recorded 2015-09-15.

Transcript

We have transcribed the talk to text, provided below.

Continue reading Dependency Injection in Angular 2.0 (alpha) – Angular Lunch

AngularJS Testing Frameworks – Mark Katerberg – Angular Lunch

At our September 9, 2015 Angular Lunch, Mark Katerberg compared the different testing frameworks with AngularJS 1.x. He shows and explains the differences between Jasmine, Mocha and associated libraries, and how they compare for Angular application unit testing.

If you don’t have time to watch it, here is my super-high-level summary:

  • Karma+Jasmine is a solid, very usable default. It is also what we use here at Oasis Digital frequently.
  • Mocha and its associated libraries are more popular for server-side testing, and have certain advantages if you are willing to learn and adopt them.
  • QUnit is most appealing to those already familiar with an older generation of testing tools, but also has completely acceptable features for modern unit testing.

But don’t take my word for it. Watch the talk video, Mark has compared all of these and more.

Transcript

We have transcribed the talk about to text, provided below. This is a rough, first-draft transcription, so any errors are probably from that process.

Continue reading AngularJS Testing Frameworks – Mark Katerberg – Angular Lunch

Angular 2 Observable Data Flow

(The usual warning: This is code from a couple weeks after Angular 2Alpha 45 – if you’re watching this months later, things may have changed!)

A few weeks ago at the Angular Connect conference in London, the core Angular team presented on the new Observable data flow and related concepts available and under development in Angular 2. Sharp-eyed viewers have tried to copy the code they presented and run it, but found that it does not actually work yet. But not all hope is lost, and it is not necessary to wait. As I write this at the beginning of November 2015, it is possible to run and see the exact kind of demo they presented, in action.

 

In this video, I present the running code, and explain it (as best I understand, keeping in mind that many of the relevant pieces are not yet documented…) line by line.

 

First Angular 2 Class Completed

Today we finished teaching our first Angular 2 class. This was our “Early Start with Angular 2“, a special, preview two-day version of what will soon be a three-day class – or perhaps even longer. This was an “alpha” class, using alpha materials, covering an alpha product, but in spite of that it went well. More importantly, it gathered positive reviews from the students, several of whom commented that the class answered important questions they had and other questions they didn’t even know they had, about Angular 2.

Paul Spears and I (Kyle Cordes) taught this one –  In the coming months our other instructors will be getting up to speed on the new technology also.

Angular 2 is a considerable step upward in terms of learning curve compared to Angular 1. This is because it is built on more powerful abstractions and libraries, most notably RxJS / ReactiveX / RxNext. As always, if you’re looking for help learning or adopting Angular (1.x or 2) please contact us. We have two more Early Start classes, then after that we will teach the full three-day version.

 

Data Field Directive Example – AngularJS

Toward the end of our Angular class we typically present some example code that uses various Angular concepts in an integrated way. Here is one of those examples, explained on video. In this example we show how to use directives to abstract away many of the details of complex data entry forms.

 

Of course the whole point of a live, human led class is that we take questions and guide the material to meet the need of the students, and that doesn’t work on video. But it still should be enjoyable for anyone learning AngularJS.

This example is from our AngularJS version 1 class, in the future I will present snippets of Angular 2 also.

 

 

angular-phonecat Using TypeScript

As mentioned in some previous posts, TypeScript is a very useful tool (language) for writing more correct code in larger JavaScript applications, and with Angular 2 (and at least one of its competitors) built in TypeScript, TS is likely to gain a lot more popularity.

To help anyone still getting started, I have translated the sample “phonecat” application used in the AngularJS 1.x tutorial, to TypeScript. See the link below.

https://github.com/OasisDigital/phonecat-typescript

 

Angular 2 Plans – Angular Boot Camp

Here at Oasis Digital, we have been receiving lots of questions about our plans around our popular Angular Boot Camp class, and the upcoming Angular version 2. It is important to handle transitions like this well; here is our plan, already underway.

Angular 2 is Coming Soon!

We are already hard at work with Angular 2, and have been for some time. We have an Early Start with Angular 2.0 class already scheduled – first in St. Louis (almost sold out!) then in San Francisco – see the page for details.

How soon is Angular 2 coming? There isn’t an official answer yet (as of September 2015), but we are hoping for an announcement at the major European Angular conference Angular Connect in October – By the way, we are a sponsor, and are offering the Angular Boot Camp a few weeks later near London.

We are further hoping, but have no evidence other than reading the tea leaves, that version 2 will ship at or around ng-conf 2016. Our plans are roughly based upon this assessment – we will adjust right away as further information about the schedule emerges.

From a technical readiness point of view, we have been watching Angular 2 quite closely, and feel like it is now converging on a ready-to-use state, after extended early development. Keep an eye on this blog for our Angular 2 content.

AngularJS 1.x Training

We will continue to support our AngularJS 1.x customers after Angular 2 ships. We expect AngularJS 1.x will continue to be under heavy use at many organizations for years to come. We plan to continue offering a AngularJS 1.x-centric class for as long as customers need it.

Our Angular Boot Camp already includes content about getting ready for version 2, and we will continue to refine and increase that based on the stream of alpha, beta, and then release versions of Angular 2.

Angular 2.x Training

As mentioned above, you can sign up now for our Early Start with Angular 2.0 class. This class is intended for developers already familiar with AngularJS 1.x, and primed to move quickly to new suite of technologies for 2.0.

At some point, as the demand develops, we will offer our full 3-day “boot camp” experience in an Angular 2.0 class. It will provide everything a new developer needs to get up and running with the new version, with some attention paid to compatibility with the old version, but taught in a way that works regardless of whether developers are coming from AngularJS 1.x.

Another interesting question is how to handle customers who realistically need to work heavily in both. We may offer a combined class, four or five days, teaching both – we are not sure if this is ideal yet, it will depend on our customers’ needs.

Update: We now offer a full 3-day Angular 2 class, starting in 2016.