Author: Oasis Digital

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.

 

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 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.

 

Angular Boot Camp, London UK

A number of companies in Europe have inquired about our Angular Boot Camp immersive Angular class, and a few threatened to send students across the ocean to attend one of our public classes. So when we saw that the 2015 European Angular conference (Angular Connect) is in easily-accessible London, we stepped in as a sponsor, and decided to offer Angular Boot Camp a few weeks thereafter, also in London.

After many weeks of paperwork delays, we have been issued the appropriate VAT number to do business there, and are pleased to announce our first offering of Angular Boot Camp across an ocean. The venue is a training facility in Wokingham, not far from Heathrow and easily accessible by train to downtown London. The dates are 3-5 November 2015, please see the site for more information and to register.

 

Early Start with Angular 2 – New Class Offering

We have been using Angular version 1.x for years now, and following version 2 development with great interest. Things have come together greatly over the last few months, after having somewhat wandered prior to that. We feel like now is the time to dig into version 2.

There been comments by the core Angular team also, which indicate that now is the time for developers to start previewing the new release.

For companies that want to dig in deep, we are now offering a brand-new “Early Start with Angular 2” class. The first scheduled date is in November in St. Louis, the second in early December in San Francisco.

(This does not replace our Angular Boot Camp class, it is firmly oriented toward immediate production use of Angular, and will remain so at least until version 2 ships as a final production form, and perhaps even thereafter for companies still using version 1.)

 

 

Learn TypeScript Now, Prepare for Angular 2.0

Like most organizations building client-side web applications (SPAs), here at Oasis Digital we have most commonly written code in plain old JavaScript, i.e. ES5, with help from linters, unit tests, etc. Lots and lots of code is out there, written in ES5 plus AngularJS and other frameworks.

There are obvious weaknesses to this approach, or rather gains that are set aside by not embracing any of the numerous newer innovations. We have dallied with CoffeeScript, worked on minor projects with ClojureScript, and so on. There are a lot of great languages out there beyond the JavaScript, but statistically JavaScript/ES5 is the winner.

(For a bit of “inside baseball”: we at Oasis Digital are generally quite willing to use unpopular, better tools. So why ES5? Because of our secondary line of business, training. When trying to train someone to use a new JavaScript library or framework, the most likely common ground we will have with them is baseline ES5.)

However, the era of mostly writing JavaScript code as it will execute in the browser is ending rapidly. Innovation of the JavaScript language is running far ahead of what browser vendors will keep up with; and even to the extent browser vendors keep up, large projects will inevitably have to support today’s browser versions (with the JavaScript version embedded therein) for years to come. A build process with compilation to JavaScript will be part of most SPA projects in the future.

So the question is, which post-JavaScript language to pick up? My personal favorite is ClojureScript, though I also see much merit in type-inference-equipped functional languages like Elm. For mass use though, I suspect the answer is simply a JavaScript successor. This is where it gets tricky. ES2015 (wow, I miss the shorter “ES6”) is the standard, and it will eventually land in all the major browsers. It will “win” in terms of mass adoption. Today is a good day to start moving your server side (NodeJS) code, test code, and as much as possible all of your JavaScript development to ES2015 or even a bit beyond – we’ve already done so. Babel works very well. Traceur works very well.

typescript2But there is at least one major exception. Angular 2.0 (which is coming soon, who knows how soon?) is built in TypeScript. You can go look right now, the source code in progress is sitting there in GitHub, and it consists mostly of TypeScript files. Most of the examples out there (including those we have published) use TypeScript. It will certainly be possible to write Angular 2 applications using plain JavaScript or any other language that compiles to JavaScript, but the first class citizen will be TypeScript.

Therefore, if you are using Angular today, and want to upgrade to Angular 2 someday, start learning TypeScript. Start using TypeScript. Start using TypeScript in some of your AngularJS 1.x work (we do).

Even aside from the obvious Angular motivation above, type systems in general (and TypeScript in particular) can be very useful. They enable a much more helpful editing/IDE experience. Numerous bugs can be caught at compile time. The incidence of runtime errors tends to be much lower. Unit testing can carry less of the load when using a typed language, so that whatever amount of effort you devote to unit testing, a greater share of it can go toward important functionality versus more trivial tests.

Here are resources to get started.

We will follow up later with examples of moving Angular 1.x code to TypeScript; we might even add a class offering to teach TypeScript for AngularJS developers. Stay tuned.