http://robertdunaway.github.io

The Future of UI is 3D

I’m not a UI expert. I’m not creating bleeding edge UI design guidelines and tools to build the next generation of User Interfaces. I’m just another programmer who sees the writing on the wall and who’s keeping an interested eye on the horizon.

The client stack

The latest evolution in the Modern Web brings performant client applications capable of running on all platforms with a single code base.

What’s next?

The 3D UI

I’ve been waiting for the tooling and design guidelines for building 3D UIs. I don’t know the science behind 3D UI but it seems obvious that more information can be communicated to the user faster than can be done with a 2D UI.

Some technologies that are pushing this are Famo.us, D3JS, and Three.js. The combination of these JavaScript libraries with modern Greenfield browsers makes the 3D UI possible.

It seems clear to me, the future of UI development is JavaScript and probably some kind of 3D UI with human interfaces other than the mouse and keyboard.

Intel interview: Dave Fetterman inside the Famo.us JavaScript framework

Dave Fetterman was skeptical about this approach until he saw it demonstrated. Now he’s the architect of a major initiative to speed up DOM manipulation with JavaScript. New libraries for DOM manipulation with JavaScript are really fast. Dave Fetterman’s version of the Facebook app uses JavaScript, and when compared to the native running Facebook app, you can’t distinguish the difference. The look, feel, and performance are comparable.

Three-minute video
https://www.youtube.com/watch?v=ElVd_M8ow2s

Famo.us works by flattening out the DOM for higher performance. Browser standards are looking to integrate Famo.us directly into their browsers. This will be a game changer.

JARVIS

In the near future, we will stop designing UIs imitating paper forms in favor of 3D designs that share more information quicker, increasing user productivity.

I’m not sure Jarvis is an example of a more productive interface. It’s just cool.
https://www.youtube.com/watch?v=ExVdnT1wqVk

3D video
https://www.youtube.com/watch?v=hmNpgye-mno

3D design guidelines

3D design guidelines are still in the early stages of development, but the end result is supposed to be the ability to create apps that make users much more productive. The first release of 3D design guidelines should be coming from IEEE mid-2015.
http://3dui.org/cfp-papers

Holo Lens

This time next year the world might look completely different. Maybe in two years…

Imagine no more monitors.

Imagine being aided in everything we do with technology.
 
If you are going for a run down the street a little guy pops up with a stop sign indicating there is a car you didn’t see.

Imagine you are in a fire in an unfamiliar place and technology guides you to safety.
Imagine you want to remodel your kitchen and now you can literally walk through the finished product before you begin.

Imagine you are in the kitchen cooking. On the left is a flat screen TV with your favorite show and on the right is a recipe. Only the TV isn’t really there and the recipe is 5 feet tall and you can read if from across the room.

This is a game changer…
https://www.youtube.com/watch?v=aThCr0PsyuA

http://robertdunaway.github.io

Ease the Transition to Angular 2.0

Significant changes are coming to Angular 2.0. Since the http://ngeurope.org/, I’ve considered how to position my angular applications for Angular 2.0.

The changes coming are being driven in large part by ES6. Eventually, all frameworks will need to make this transition. Angular is stepping up and getting it done now. So let’s just suck it up and get-er-done.

Go ahead and bookmark this blog post. Whenever I learn of a change that positions our applications for Angular 2.0, I’ll update this post. This will be a single go-to place for all changes, making the transition as easy as possible.

Let’s jump right in…

Learn ES6

I’ll soon post links here to many tutorials, utilities, and advice on making this transition.

Use the “controller as” syntax

With the release of Angular 1.3 the “controller as” syntax was introduced.

This helps reduce dependence on $scope and positions our controllers to more easily become ES6 classes when we transition to Angular 2.0.

Use the new ng-router

Update: Rob Eisenberg left the AngularJS team and is back to working on Durandal.

Rob Eisenberg, the author of Durandal, is championing a new more advanced router for Angular. His experience with Durandal, and a general survey of the features available in all of today’s popular routers, has driven the requirements for the new router.

The ng-router is an Angular 2.0 feature but is being back ported to 1.3. Early adoption of this new router means you’ll have one less thing to deal with when Angular 2.0 comes out.

Besides, it’s got a few freaking cool features in it. Check out the video below. It’s two months old which, in our new world, means it’s ancient and outdated but still a great starting point. I’ll post more tutorials as I learn how to use it.

https://www.youtube.com/watch?v=h1P_Vh4gSQY
https://www.npmjs.org/package/angular-new-router

Use services wherever possible

The more code we can move out of controllers and into services, the easier the transition to Angular 2.0 will be.

Full disclosure – I came across this advice on “Adventures in Angular” podcast and while I get “separation of concerns,” I don’t know how it helps with Angular 2.0. I’ll figure this out and update my notes here.

Lazy loading

Lazy (eager) loading of modules is planned for Angular 2.0.

For now, I’ve prepared for this by implementing lazy loading with ocLazyLoad.

I mention it in this router post but I’ll provide a specific post about lazy loading later.

http://robertdunawaypro.blogspot.com/2014/10/routeconfig.html

Drop-in application design

I have no idea what to call this, so I completely made up that name. The idea is this. With the new angular router you’ll have the ability to modularize your application such that you can drop modules into an application from another application and this is supposed to work.

http://Mashupjs.githut.io has an implementation like this. I’ll upgrade it to use the features of the new Angular router as soon as I can.

In closing

I’m just like everyone else. I’m figuring this stuff out as I go. If you come across something you think might be helpful then post a comment and I’ll add it to this list.

Thanks…