The Quest For The Perfect User Interface Technology

1
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
2
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 gt 100,000 lines of code
• Includes a powerful and easy-to-use integrated
  development environment (IDE)

3
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 gt 100,000 lines of code
• Includes a powerful and easy-to-use integrated
  development environment (IDE)
• No, coding in VI does not count!

4
Is There A Perfect UI Technology? -2

• Short Answer
• No

5
Is There A Perfect UI Technology? -2

• Short Answer
• No

Thank you for your time today. Any Questions?
6
Some Good UI Technologies

• Java (Swing, SWT, and JavaFX)
• Google Web Toolkit (GWT)
• Microsoft Visual Studio
• Adobe Flash Builder
• HTML 5 and JavaScript
• Unity3D

7
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

8
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-view-controller 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

9
Java Swing -2 (NetBeans)
10
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 doesnt 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

11
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 dont
  require scripting (can use Java code)
• Better animation support than Swing or SWT
• Runs anywhere that Java runs

12
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 dont
  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 havent 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

13
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

14
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!

15
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!

16
Future of Java in GUIs -2

• Unfortunately for Java, there is a tiny, niche
  market where Java does not run. Perhaps youve
  heard of it?

17
Future of Java in GUIs -2

• Unfortunately for Java, there is a tiny, niche
  market where Java does not run. Perhaps youve
  heard of it?

• Half a billion smart phones are sold each year
  worldwide. Some of them can even talk to you!

18
Future of Java in GUIs -2

• Unfortunately for Java, there is a tiny, niche
  market where Java does not run. Perhaps youve
  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

19
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)

20
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
21
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
22
Future of Java in GUIs -4

• On the other hand, if you are writing an app for
  a niche audience and dont 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.

23
Future of Java in GUIs -4

• On the other hand, if you are writing an app for
  a niche audience and dont 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.

24
Some Good UI Technologies

• Java (Swing, SWT, and JavaFX)
• Google Web Toolkit (GWT)
• Microsoft Visual Studio
• Adobe Flash Builder
• HTML5 and Javascript
• Unity3D

25
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

26
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
• The reality
• 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 doesnt?), and
  yet need to produce a JavaScript-based browser
  application
• GWT is a plugin for Eclipse

27
Google Web Toolkit (GWT) -2

• Heres 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, Ill show you the new, Unity version of
this application
28
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

29
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

30
Some Good UI Technologies

• Java (Swing, SWT, and JavaFX)
• Google Web Toolkit (GWT)
• Microsoft Visual Studio
• Adobe Flash Builder
• HTML 5 and JavaScript
• Unity3D

31
Adobe Flash Builder

• Flash is a powerful web technology (and it now
  supports 3D and better leverages GPUs)

32
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
33
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)

34
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 (dont 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)

35
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!

36
Adobe Flash Builder -3

• November 9, 2011, Adobe announces Flash wont go
  mobile

37
Adobe Flash Builder -3

• November 9, 2011, Adobe announces Flash wont go
  mobile

38
Adobe Flash Builder -3

• November 9, 2011, Adobe announces Flash wont go
  mobile

39
Adobe Flash Builder -3

• November 9, 2011, Adobe announces Flash wont go
  mobile

40
Adobe Flash Builder -4

• No, Flash isnt dead, but it isnt looking nearly
  as formidable as it once did.

41
Adobe Flash Builder -4

• No, Flash isnt dead, but it isnt looking nearly
  as formidable as it once did.

42
Adobe Flash Builder -4

• No, Flash isnt dead, but it isnt 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 well discuss later, now
  supports Flash so Unity games can play within the
  Flash plugin on a variety of desktop platforms

43
Some Good UI Technologies

• Java (Swing, SWT, and JavaFX)
• Google Web Toolkit (GWT)
• Microsoft Visual Studio
• Adobe Flash Builder
• HTML5 and JavaScript
• Unity3D

44
HTML 5 and JavaScript -1

• HTML 5 can do video and other things that Flash
  can do, doesnt 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)

45
HTML 5 and JavaScript -1

• HTML 5 can do video and other things that Flash
  can do, doesnt 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)
• There are some good Javascript libraries out
  there. Ones Ive looked at but know little about
• JQuery, Dojo, ExtJS
• Others that I know even less about
• Chrome Frame and MooTools

46
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

47
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
• You need the finest control (maximum feature set)
  possible in a browser application
• For example, Gmail is amazing
• Youd 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

48
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
• You need the finest control (maximum feature set)
  possible in a browser application
• For example, Gmail is amazing
• Youd 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
• 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

49
HTML 5 and JavaScript -3

• So it is inevitable that HTML 5/Javascript will
  take over the world wide web, crushing all other
  competition

50
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

51
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!

52
Some Good UI Technologies

• Java (Swing, SWT, and JavaFX)
• Google Web Toolkit (GWT)
• Microsoft Visual Studio
• Adobe Flash Builder
• HTML5 and JavaScript
• Unity3D

53
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)
• gt800,000 registered developers
• Good community support and documentation,
  tutorials

54
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
55
Unity3D -3

• Unity allows us to model the world and space in
  3D
• By leveraging a commercial game engine, were
  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)

56

• Any Questions?

Jeff.S.Smith_at_noaa.gov Eric.J.Hackathorn_at_noaa.gov J
ulien.Lynge_at_noaa.gov