Application development, whether it’s client server, traditional web or a mobile web application, the recent trend is to use patterns like Fluid Grid Layout and Responsive Web Design and technologies like HTML5, CSS3, JavaScript (on both client and server tiers).
Also, the tools for building the client-side of modern web apps (desktop and mobile) are quickly evolving and changing. Everything that was built 10 years ago for doing HTML UIs on the server is currently being rebuilt on the client: MVC frameworks, Templating libraries, Components libraries, etc. jQuery is the foundation of most modern apps because it provides somewhat of a standard library for JavaScript. For MVC there are many options but frameworks like Backbone.js are getting more attention. There are also many client-side templating libraries. Some of these will work on the client and also on the server; which are useful if some of the users don’t have the modern/fast JavaScript engines in their browsers.
James Ward from TypeSafe spoke at this year's JavaOne 2012 Conference about client server application development with HTML5 and Java technologies.
InfoQ caught up with James to talk about his presentation from JavaOne Conference and this new application development trend.
InfoQ: What should the developers look for in a Java based HTML5 development framework?
James: The new model for modern web apps is similar to old Client/Server architecture but this time the Client is the browser with JavaScript, CSS, and HTML; while the Server is RESTful JSON services. When looking for a modern Java web framework you need to look for three things:
- Does the web framework facilitate building both the Client and the Server? Modern web frameworks usually have "Asset Compilers" or "Asset Pipelines" that help developers write their JavaScript, CoffeeScript, and LESS. As an example, Play Framework includes an Asset Compiler that unifies the experience of writing the Server code (Java or Scala) and writing the Client code (JavaScript, CoffeeScript, and LESS).
- Can you manage client-side dependencies like you manage server-side dependencies? More and more of our code is moving to the Client (JavaScript, CSS, etc). This means we are using more and more client-side libraries like jQuery, Bootstrap, Backbone, etc. Because of this we need to manage our client-side dependencies (and their transitive dependencies) like we manage our server-side dependencies. I created a project called "WebJars" (www.webjars.org) that wraps up common client-side libraries into Jar files so that they can be included in a list of Maven dependencies (or other build tool).
- Is it easy to create RESTful JSON services? RESTful JSON is now the de facto standard way to expose data and services to a client; whether the consumer is a mobile app, or a modern web app (desktop or mobile). Mapping HTTP verbs and paths to a back-end service needs to be simple and declarative. Most modern web frameworks (e.g. JAX-RS, Play Framework, Spray, BlueEyes) provide this.
InfoQ: Can you talk about some design considerations in developing client/server or mobile web applications using Java and HTML5?
James: The new modern web architecture is very different from traditional web apps. To understand these new architectural considerations it is best to hear from those who have successfully built apps in this way. Here are two good resources from those who have built modern web apps:
InfoQ: You mention the stateless web tier architecture in your talk. Can you discuss this more and how it helps the mobile web applications?
James: Modern web apps have the advantage of moving UI state out of the server and onto the client. The stateless web tier makes four things easy:
- Horizontal scalability is easy when the web tier does not contain state. This allows the web tier to be scaled independently and instantly.
- Continuous Delivery in a stateless web tier is also much easier since new versions can be deployed without having to worry about what happens with session state.
- RESTful services should be stateless. Each request is atomic with no dependency on any previous request.
- Testing stateless web applications is much easier whether those tests are automated (e.g. unit, functional) or a developer hitting refresh in their browser to test new code. When building Play Framework apps my typical development cycle is simply: edit code, save, and then reload the browser / rerun the automated tests. This development process works, in-part because Play Framework applications are stateless.
InfoQ: What should the developers watch out for (gotchas) when creating mobile web applications using Java and HTML5?
James: Know your users before you make technology decisions. If your users don't have browsers with modern capabilities you may have to taper back usage of certain APIs and libraries. Based on who your users will be and what their devices and client capabilities are, you may need to make technology compromises.
InfoQ: You also talked in your presentation about the Browser being the new application platform. Can you discuss this new trend and how it impacts the way we develop and deploy client/server or mobile web applications?
James: The web browser is the universal client platform. It's certainly not perfect but it is everywhere and evolving. About ten years ago we moved our UIs to the browser but used them as dumb terminals rendering markup (UI + data) produced on a web server. The advantage of this approach is that users don't need to install anything to use any application. The disadvantage of this approach is that the UIs require a page reload for each user interaction. The Ajax revolution began to change this by moving part of the UI logic to the client. Modern web & mobile apps go all the way by moving the entire UI to the client. This provides the best user experience and performance. This also fits well with mobile architectures that may need to work offline or may use native UIs.
InfoQ: What are your thoughts on mobile web design concepts like Responsive Design and Fluid Grid Layout?
James: In the past our web applications were primarily written for one profile of devices: desktop/laptops. Most of these devices have similar screen sizes so web app developers haven't needed to consider other device profiles. The proliferation of mobile and tablet devices have changed all of this. Developers need to insure that their applications work on a wide variety of device profiles. Responsive Design and Fluid Grid Layout are strategies to alter the layout & look of an application based on the profile of the device. Some of these strategies use CSS Media Queries which can tell the browser to use different CSS files based on device profiles like screen size. Use of these strategies depend on what you are building and what your users want. If small UI and layout tweaks are the only things that change between profiles then these approaches may work well. Otherwise you may want to look into other, heavier strategies.
InfoQ: Mobile web development as an emerging trend is also making other technologies like REST web services and JSON for data exchange between server and client more popular. Can you talk about these technologies and how they complement each other in the overall mobile web development?
James: Traditional web apps combine UI and data. That works fine when you have only one type of client and the aggregation of UI and data should happen on the server. In modern web and mobile apps there will likely be multiple clients consuming the same data. RESTful services provide a simple way to use the HTTP protocol to map verbs and paths to a resource / data. JSON is one way to serialize that data (turn it from objects in memory to something that can be transferred). XML is another way to serialize data. Most modern apps have chosen JSON because it is super simple and well supported by most technologies. The combination of REST and JSON is simple and supports a wide variety of server and client technologies.
InfoQ: Where does JavaScript fit in this new client/server and mobile development paradigm?
James: JavaScript is the programming language for the client-side of modern web apps. But JavaScript isn't perfect so there are many other languages like CoffeeScript, TypeScript, and Dart that can compile down into JavaScript. Either way, the code that actually runs the UI on the client in a modern web app is JavaScript.
He also talked about the future of web and mobile application development.
James: The future of web and mobile apps with HTML5 and Java is looking great! There is a plethora of technology options available for both the client and the server side and they are all rapidly evolving. All of this will ultimately help us build better applications more easily and quickly. These are exciting times for web developers!
About the Interviewee:
James Ward is a Developer Advocate at Typesafe. Today he focuses on teaching developers how to deploy Java, Play! and Scala apps to the cloud. James frequently presents at conferences around the world such as JavaOne, Devoxx, and many other Java get-togethers. Along with Bruce Eckel, James co-authored First Steps in Flex. He has also published numerous screencasts, blogs, and technical articles. Starting with Pascal and Assembly in the 80's, James found his passion for writing code. Beginning in the 90's he began doing web development with HTML, Perl/CGI, then Java. After building a Flex and Java based customer service portal in 2004 for Pillar Data Systems he became a Technical Evangelist for Flex at Adobe. You can find him tweeting as @_JamesWard, answering questions on StackOverflow and posting code here .