Transcript QuestForPerfectUITechnology

The Quest For The Perfect
User Interface Technology
Presented by Jeff Smith, Julien Lynge, and Eric Hackathorn
February 23, 2012
NOAA's Earth System Research Lab in Boulder, CO
Is There A Perfect UI Technology? -1

Something that supports everything from






sophisticated animation and 3D
Rich set of GUI widgets
Mature technology that is largely bug free and likely to be around in
another 5 years
Runs on Windows, Mac, Linux, iOS, Android, web browsers
Scales well (in the software engineering sense of maintainability)
from small apps to large ones with > 100,000 lines of code
Includes a powerful and easy-to-use integrated development
environment (IDE)
Is There A Perfect UI Technology? -1

Something that supports everything from






sophisticated animation and 3D
Rich set of GUI widgets
Mature technology that is largely bug free and likely to be around in
another 5 years
Runs on Windows, Mac, Linux, iOS, Android, web browsers
Scales well (in the software engineering sense of maintainability)
from small apps to large ones with > 100,000 lines of code
Includes a powerful and easy-to-use integrated development
environment (IDE)

No, coding in VI does not count!
Is There A Perfect UI Technology? -2
Short Answer:
No
Is There A Perfect UI Technology? -2
Short Answer:
No
Thank you for your time today.
Any Questions?
Some Good UI Technologies






Java (Swing, SWT, and JavaFX)
Google Web Toolkit (GWT)
Microsoft Visual Studio
Adobe Flash Builder
HTML 5 and JavaScript
Unity3D
Java Swing -1

Java Swing (the artist formerly known as Java Foundation
Classes or JFC) is the oldest of the Java GUI frameworks

Okay, technically the Abstract Window Toolkit (AWT) is the oldest,
but that API was deprecated when Seinfeld was still on NBC


Technical detail: Swing builds on top of AWT and leverages its ability to interact
with the OS to access the mouse and keyboard
Swing includes a rich set of UI widgets, although the base
components are not very flashy
Java Swing -1

Java Swing (the artist formerly known as Java Foundation
Classes or JFC) is the oldest of the Java GUI frameworks

Okay, technically the Abstract Window Toolkit (AWT) is the oldest,
but that API was deprecated when Seinfeld was still on NBC






Technical detail: Swing builds on top of AWT and leverages its ability to interact
with the OS to access the mouse and keyboard
Swing includes a rich set of UI widgets, although the base
components are not very flashy
Platform independent (100% Java), following the model-viewcontroller pattern to decouple the data being viewed (often modeled
as Java classes) from the UI code that is viewing it.
Very flexible, easy to extend existing components and derive new
looks and behaviors
NetBeans (free) and IntelliJ IDEA (not expensive) are great IDEs for
Swing development
Of course, your users must have a Java run time environment (JRE)
installed in order to run your application
Java Swing -2 (NetBeans)
Java SWT -1

Standard Widget Toolkit
 Most SWT developers use the Eclipse rich client platform
(RCP) for developing applications
 Unlike Swing, SWT uses native widgets
 It doesn’t run everywhere Java does, but it does run in
Windows, Linux, and Mac OS/X
 Eclipse (free) is a great IDE as well
Disclaimer: I have used Eclipse on server side
projects but have done no significant SWT projects
JavaFX

Can use JavaFX script which gets compiled down to Java
byte code




For someone unfamiliar with Java, JavaFX script is easier to learn
A learning curve, however, for seasoned Java coders. JavaFX 2.0
includes new APIs that don’t require scripting (can use Java code)
Better animation support than Swing or SWT
Runs anywhere that Java runs
JavaFX

Can use JavaFX script which gets compiled down to Java
byte code








For someone unfamiliar with Java, JavaFX script is easier to learn
A learning curve, however, for seasoned Java coders. JavaFX 2.0
includes new APIs that don’t require scripting (can use Java code)
Better animation support than Swing/SWT
Runs anywhere that Java runs
Good for apps imbedded in web pages (in a sense, an
alternative to Flash for Java coders)
I haven’t used the new version 2.0, but I found that my 1.3
apps loaded somewhat slowly on web pages (~10 seconds)
JavaFX support integrated into NetBeans
If I were starting a new Java GUI app that needed some
pizzaz, I would give serious thought to JavaFX
Future of Java in GUIs -1


Of course, your users must have a Java run time
environment (JRE) installed to run your application.
Java runs on many operating systems
Future of Java in GUIs -1


Of course, your users must have a Java run time
environment (JRE) installed to run your application.
Java runs on many operating systems
According to Oracle, 3 billion machines run Java. Apparently,
Java is taking over the world and runs everywhere. Take that,
Apple and Microsoft!
Future of Java in GUIs -1


Of course, your users must have a Java run time
environment (JRE) installed to run your application.
Java runs on many operating systems
According to Oracle, 3 billion machines run Java. Apparently,
Java is taking over the world and runs everywhere. Take that,
Apple and Microsoft!
Future of Java in GUIs -2

Unfortunately for Java, there is a tiny, niche market where
Java does not run. Perhaps you’ve heard of it?
Future of Java in GUIs -2

Unfortunately for Java, there is a tiny, niche market where
Java does not run. Perhaps you’ve heard of it?

Half a billion smart phones are sold each year worldwide. Some of them
can even talk to you!
Future of Java in GUIs -2

Unfortunately for Java, there is a tiny, niche market where
Java does not run. Perhaps you’ve heard of it?


Half a billion smart phones are sold each year worldwide. Some of them
can even talk to you!
Hundreds of millions of tablets are also sold annually, and they are
growing more and more capable
Future of Java in GUIs -3

While there is Java ME and the promise of Java on smart
phones, at last count, there were 11 Java ME phones in
existence in the world (down from 12 last month)
Future of Java in GUIs -3

While there is Java ME and the promise of Java on smart
phones, at last count, there were 11 Java ME phones in
existence in the world (down from 12 last month)
Bottom line: Java does not appear to be heading to smart
phones or tablets within any reasonable geologic time scale
Future of Java in GUIs -3

While there is Java ME and the promise of Java on smart
phones, at last count, there were 11 Java ME phones in
existence in the world (down from 12 last month)
Bottom line: Java does not appear to be heading to smart
phones or tablets within any reasonable geologic time scale
Future of Java in GUIs -4


On the other hand, if you are writing an app for a niche
audience and don’t need the app to work on mobile devices,
then Java is fine.
Java Web Start is a great for deploying Java applications to
the web. User can download/run your app with one click and
receive automatic updates when you push out new versions.
Future of Java in GUIs -4


On the other hand, if you are writing an app for a niche
audience and don’t need the app to work on mobile devices,
then Java is fine.
Java Web Start is a great for deploying Java applications to
the web. User can download/run your app with one click and
receive automatic updates when you push out new versions.
Some Good UI Technologies






Java (Swing, SWT, and JavaFX)
Google Web Toolkit (GWT)
Microsoft Visual Studio
Adobe Flash Builder
HTML5 and Javascript
Unity3D
Google Web Toolkit (GWT) -1


For building web browser applications
The promise:

write your code in Java (hooray, Java) and GWT will “compile” down
your code to the proper HTML and Javascript to run on any web
browser
Google Web Toolkit (GWT) -1


For building web browser applications
The promise:


The reality:



write your code in Java (hooray, Java) and GWT will “compile” down
your code to the proper HTML and Javascript to run on any web
browser
most of the code works, but you still have nagging problems where
the Javascript it generates works on one web browser (like IE) but
not another (like Firefox).
I recommend GWT if you love writing Java code, hate writing
JavaScript (and who doesn’t?), and yet need to produce a
JavaScript-based browser application
GWT is a plugin for Eclipse
Google Web Toolkit (GWT) -2

Here’s a GWT app that I co-developed with Evan Polster that
uses the Google Earth browser plugin to display FIM data
We wrote
the code
for this
panel in
Java
Later, I’ll show you the new, Unity version of this application
Some Pretty Good UI Technologies






Java (Swing, SWT, and JavaFX)
Google Web Toolkit (GWT)
Microsoft Visual Studio
Adobe Flash Builder
HTML 5 and JavaScript
Unity3D
Microsoft Visual Studio


They give away a free version (VS Express)
Not used much in the Earth sciences field, but millions of
Visual Studio developers are out there

Can create Windows and Silverlight (browser plugin) applications in
multiple .NET framework languages including




Visual Basic
Visual C#
C# is very similar to Java and can be used in Unity3D development
(more on that later)
Visual Studio is a powerful and mature IDE
Some Good UI Technologies






Java (Swing, SWT, and JavaFX)
Google Web Toolkit (GWT)
Microsoft Visual Studio
Adobe Flash Builder
HTML 5 and JavaScript
Unity3D
Adobe Flash Builder

Flash is a powerful web technology (and it now
supports 3D and better leverages GPUs)
Adobe Flash Builder


Flash is a powerful web technology (and it now
supports 3D and better leverages GPUs)
Okay, Flash is best known for annoying banner
ads on websites.
Flash banner
on NYTimes
Adobe Flash Builder -1



Flash Builder can be used to create complex, forms based
applications that run in all web browsers that have the Flash
plugin.
Version 4.6 can now compile native applications for iOS
(iPhones and iPads)
Flash Builder is a great IDE for designing forms, writing
object oriented code (ActionScript is similar to Java)
Adobe Flash Builder -1






Flash Builder can be used to create complex, forms based
applications that run in all web browsers that have the Flash
plugin.
Version 4.6 can now compile native applications for iOS
(iPhones and iPads)
Flash Builder is a great IDE for designing forms, writing
object oriented code (ActionScript is similar to Java)
Doing slick animations in your applications is a breeze (don’t
need to worry about threading issues as it is all taken care
for you by the Flash player)
Lots of video tutorials on the Adobe website showing
developers how to do various things in Flash
Vibrant user community (easy to Google for answers when
you are stuck on a problem)
Adobe Flash Builder -2



Integrated and easy debugging, refactoring
No browser specific code to write!
Great form designer
Perhaps the perfect tool for creating browser applications!
Adobe Flash Builder -3
November 9, 2011, Adobe announces Flash won’t go mobile…
Adobe Flash Builder -3
November 9, 2011, Adobe announces Flash won’t go mobile…
Adobe Flash Builder -3
November 9, 2011, Adobe announces Flash won’t go mobile…
Adobe Flash Builder -3
November 9, 2011, Adobe announces Flash won’t go mobile…
Adobe Flash Builder -4

No, Flash isn’t dead, but it isn’t looking nearly
as formidable as it once did.
Adobe Flash Builder -4

No, Flash isn’t dead, but it isn’t looking nearly
as formidable as it once did.
Adobe Flash Builder -4





No, Flash isn’t dead, but it isn’t looking nearly
as formidable as it once did.
On the other hand, my take is that on the desktop,
Flash will continue for some time.
It is already a popular platform for web games (with GPU
support and 3D). It is much faster than HTML 5.
Like Java (which has no real mobile devices support), Flash
desktop browser apps will likely find a niche for some time
Even Unity, which we’ll discuss later, now supports Flash so
Unity games can play within the Flash plugin on a variety of
desktop platforms
Some Good UI Technologies






Java (Swing, SWT, and JavaFX)
Google Web Toolkit (GWT)
Microsoft Visual Studio
Adobe Flash Builder
HTML5 and JavaScript
Unity3D
HTML 5 and JavaScript -1

HTML 5 can do video and other things that Flash can do,
doesn’t require a plugin, and works on mobile devices



Different browsers have different levels of HTML 5 support
Chrome was best, then Firefox, then desktop Safari, then IE last
Surprisingly, as of Oct 12, 2011, the iOS Safari browser was slightly
more HTML5 compliant than the Safari desktop browser (according
to InfoWorld)
HTML 5 and JavaScript -1

HTML 5 can do video and other things that Flash can do,
doesn’t require a plugin, and works on mobile devices




There are some good Javascript libraries out there. Ones
I’ve looked at but know little about:


Different browsers have different levels of HTML 5 support
Chrome was best, then Firefox, then desktop Safari, then IE last
Surprisingly, as of Oct 12, 2011, the iOS Safari browser was slightly
more HTML5 compliant than the Safari desktop browser (according
to InfoWorld)
JQuery, Dojo, ExtJS
Others that I know even less about

Chrome Frame and MooTools
HTML 5 and JavaScript -2

Why would you develop in HTML 5/Javascript?

You need a browser app that has no entry barrier (requires no Java,
Silverlight, or Flash plugin, etc.)

E-commerce. Amazon.com will want anyone with a valid credit card
to be able to buy porcelain yard gnomes from their website
HTML 5 and JavaScript -2

Why would you develop in HTML 5/Javascript?

You need a browser app that has no entry barrier (requires no Java,
Silverlight, or Flash plugin, etc.)


You need the finest control (maximum feature set)
possible in a browser application


E-commerce. Amazon.com will want anyone with a valid credit card
to be able to buy porcelain yard gnomes from their website
For example, Gmail is amazing
You’d rather spend quality time writing special Javascript code for
each browser than go home to your spouse at 5 pm

Different browsers will still have different levels of HTML 5/Javascript support
HTML 5 and JavaScript -2

Why would you develop in HTML 5/Javascript?

You need a browser app that has no entry barrier (requires no Java,
Silverlight, or Flash plugin, etc.)


You need the finest control (maximum feature set)
possible in a browser application


For example, Gmail is amazing
You’d rather spend quality time writing special Javascript code for
each browser than go home to your spouse at 5 pm


E-commerce. Amazon.com will want anyone with a valid credit card
to be able to buy porcelain yard gnomes from their website
Different browsers will still have different levels of HTML 5/Javascript support
If I were starting a browser application today that needed to
run on many platforms (including iOS), I would probably go
with HTML 5


Adobe Edge is a slick tool that enables you to create Flash-like
animations for HTML 5. Adobe Dreamweaver also supports HTML 5.
Many tool developers are ramping up support for HTML 5
HTML 5 and JavaScript -3

So it is inevitable that HTML 5/Javascript will take over the
world wide web, crushing all other competition
HTML 5 and JavaScript -3

So it is inevitable that HTML 5/Javascript will take over the
world wide web, crushing all other competition

Wait! Enter a new competitor





Google Chrome Native Client (NaCl)
Runs native code in Chrome on Windows, Mac,
and Linux
Much faster than HTML 5, direct access to
computer hardware (including disk), has its own
sandbox security model
Potentially a great platform for high performance
apps and games
Currently apps must be distributed in the Google
Chrome Store
HTML 5 and JavaScript -3

So it is inevitable that HTML 5/Javascript will take over the
world wide web, crushing all other competition

Wait! Enter a new competitor





Google Chrome Native Client (NaCl)
Runs native code in Chrome on Windows, Mac,
and Linux
Much faster than HTML 5, direct access to
computer hardware (including disk), has its own
sandbox security model
Potentially a great platform for high performance
apps and games
Currently apps must be distributed in the Google
Chrome Store
Angry Birds now runs natively inside Chrome!
Some Good UI Technologies






Java (Swing, SWT, and JavaFX)
Google Web Toolkit (GWT)
Microsoft Visual Studio
Adobe Flash Builder
HTML5 and JavaScript
Unity3D
Unity3D -1




Unity is a commercial game engine that excels at rendering
3D (and 2D) scenes
Unity applications can be deployed to Windows, Mac, iOS,
Xbox, Wii, and the web (through the Unity web player)
>800,000 registered developers
Good community support and documentation, tutorials
Unity3D -2


Unity is also good for 3D data visualization
Julien, Eric, and I have written a Unity-based 3D spinning
globe application for displaying environmental data (source
code written in C#)
TerraViz showing NOAA satellites, NORAD space junk, and active fires data
Unity3D -3



Unity allows us to model the world and space in 3D
By leveraging a commercial game engine, we’re exploiting
the enormous effort that has gone into optimizing the display
of millions of polygons on GPUs
When we display global G9 (30 km) model data (FIM) in
TerraViz, we can display 2.6 million polygons and rotate the
globe with no delays

As a comparison, Google Earth chokes at around 10,000 polygons
(KML)
Any Questions?
[email protected]
[email protected]
[email protected]