Modern Web Development with IBM Websphere: Developing, Deploying, and Managing Mobile and Multi-Platform Apps

Build Tomorrow’s Best Mobile/Web Applications with IBM WebSphere Application Server 8.5 and IBM Worklight

This guide presents a coherent strategy for building modern mobile/web applications that are fast, responsive, interactive, reusable, maintainable, extensible, and a pleasure to use. Four IBM experts offer practical, hands-on coverage of front-end development with IBM WebSphere Application Server 8.5, IBM Worklight, and today’s most popular open source frameworks.

Using well-crafted examples, the authors introduce best practices for MobileFirst development, helping you create apps that work superbly on mobile devices and add features on conventional browsers. Throughout, you’ll learn better ways to deliver Web 2.0 apps with HTML /JavaScript front ends, RESTful Web Services, and persistent data. Proven by IBM and its customers, the approach covered in this book leads to more successful mobile/web applications—and more effective development teams.

Coverage Includes

• Developing for MobileFirst: moving from “graceful degradation” to “progressive enhancement”

• Quickly delivering lightweight JEE apps with WebSphere Application Server’s new Liberty Profile

• Implementing an agile, user-centered, page-oriented approach to design

• Constructing REST services with WebSphere Liberty, Eclipse, and JEE annotations

• Building better front-end application architectures with frameworks and JavaScript

• Designing and building complex, transactional RESTful services that interface with databases and other data sources

• Building IBM Worklight hybrid apps with open source frameworks: jQuery Mobile, Backbone, Require.js, and Handlebars

• Debugging cross-platform, multi-language modern web apps

• Promoting scalability, security, and connectivity into the wider enterprise

The IBM Press developerWorks Series pairs books with complementary resources on the developerWorks website at https://www.ibm.com/developerworks/dwbooks/

Use IBM WebSphere® Application Server 8.0 to architect and build Rich Internet Applications (RIAs) that are fast, responsive, interactive, reusable, maintainable, extensible, and a pleasure to use. Through a complete case study application, four IBM WebSphere experts teach you everything you need to know to build RIAs that incorporate HTML/JavaScript front-ends built with Dojo; RESTful Web Services back-ends using JAX-RS; and persistent data relying on the JPA standard. Modern Web Development with IBM WebSphere guides you through making the most of MVC architecture, mastering proven RIA development best practices, and applying powerful new UI features built into WAS 8.0. Supported by a website hosting a complete cross-product example application, and up-to-date links to installable WebSphere demo versions, this book will be an indispensable resource for everyone developing WAS 8.0 applications that include a UI component (as do at least 90% of all WAS applications). It will also be helpful to developers working with competitive application servers such as JBoss who can still leverage many of the best practices and architectural techniques presented here. (Note: This is the first title in our new IBM Press WebSphere Series, offering comprehensive, cohesive, and example-rich coverage of solutions development with today's WebSphere products. It replaces Part I of Enterprise Java Development with IBM WebSphere, offering completely revamped coverage of Web 2.0 and RIA. A second book, Enterprise Services Development with IBM WebSphere, will replace Part II of that older title.)

IBM WebSphere® Application Server Liberty Profile is an outstanding platform for modern Rich Internet Application development. This book covers everything developers need to build Mobile Rich Internet Applications (RIAs) that are fast, responsive, interactive, reusable, maintainable, extensible, and a pleasure to use. Drawing on 40+ years of combined WebSphere experience, four of IBM's leading experts guide readers through every facet of building RIAs with:

• Multichannel front-ends built with HTML 5 Based Technology
• RESTful Web Services back-ends using JAX-RS
• Using the IBM Worklight Platform to build Mobile App
• Use of different JavaScript frameworks and techniques such as jQuery Mobile, Dojo, Bootstrap, Backbone, requirejs, and handlebars
• RESTful APIs using JAX-RS
• Persistent data relying on JPA

Through a complete sample application, readers learn how to make the most of MVC architecture, master proven RIA development best practices, and apply powerful new UI features built into WebSphere.

Kyle Brown is a Distinguished Engineer and CTO of Emerging Technologies with IBM Software Services and Support for WebSphere. He has 20 years of experience in designing and architecting large-scale systems. In his role as a DE, he is responsible for helping customers adopt emerging technologies, specifically cloud technologies and services-oriented approaches. He specializes in developing and promoting best practices approaches to designing large-scale systems using SOA, Java Enterprise Edition (JEE), and the IBM WebSphere product family. He is a best-selling author and regular conference speaker, as well as an internationally recognized expert in patterns, JEE, and object technology.

Roland Barcia is an IBM Distinguished Engineer and CTO for the Mobile and WebSphere Foundation for Software Group Lab Services. Roland is responsible for technical thought leadership and strategy, practice technical vitality, and technical enablement. He works with many enterprise clients on mobile strategy and implementations. He is the coauthor of four books and has published more than 50 articles and papers on topics such as mobile technologies, IBM MobileFirst, Java Persistence, Ajax, REST, JavaServer Faces, and messaging technologies. He frequently presents at conferences and to customers on various technologies. Roland has spent the past 16 years implementing middleware systems on various platforms, including Sockets, CORBA, Java EE, SOA, REST, web, and mobile platforms. He has a master’s degree in computer science from the New Jersey Institute of Technology.

Karl Bishop is a Product Manager with the IBM Worklight team. He currently works with the IBM Worklight Product Design team, focusing on developer experience. Before that, Karl spent many years working within the IBM Software Services for WebSphere group. His technical focus has been mobile app development, HTML5, Web 2.0, and JavaScript toolkits. Karl has worked for IBM for more than 16 years. He previously spent another dozen years honing his geek credentials at another computer company in California. Karl currently works out of his house, hidden away in the Sandhills near Pinehurst, North Carolina.

Matthew Perrins is an Executive IT Specialist and the lead architect for the BlueMix Mobile Backend as a Service Client SDK. He is the technical lead for IBM Software Services for Mobile for Europe, which is focused on delivering first-of-their-kind mobile solutions for IBM clients. He has worked for IBM since 1989 and has spent a significant amount of time designing and building Java-based enterprise solutions based on WebSphere.

Preface     xviii

Chapter 1  The Modern Web     1

How the Web Has Changed     1

The Mobile Effect     7

   Mobile Application Development Styles     7

   Building for the Mobile Experience     11

   Choosing a Mobile Development Approach     13

The Convergence of Desktop Web and Mobile:

Multichannel Development     15

REST and Web APIs     17

IBM WebSphere and IBM Worklight     18

The Process of Building Modern Web Applications     19

   Introducing the Team     19

   Following a User-Centered Design and Development Process     20

Introducing User-Centered Design     22

   Applying the Design Process: Descriptions from Our Example     22

   Introducing Development into the Process     5

   Division of Labor: Defining the User Model and REST Interfaces     25

Summary     27

Endnotes     27

Chapter 2  WAS and the Liberty Profile     29

How We Got Here     29

   A Brief History of WAS     29

   What Changed in the Programming Model?     31

What Is Liberty?     33

   Some Coding Considerations and a Servlet and JDBC Example     36

Deploying the Example Using the Liberty Profile     41

   Server Creation and Structure     42

   Deploying an Application on a Server     43

   Testing the Sample Application     44

   Running the Example Within Eclipse     45

Summary     48

Endnotes     48

Chapter 3  Design     49

Agile UI Design Process     49

More on User Centric Design     51

   Design for Multichannel     52

   Page-Oriented User Interfaces     53

   Patterns for User Interface Design Web     55

   View Interaction Patterns     55

   Targeted Mobile Apps vs. Multichannel Applications     57

UI Design Example     58

Summary     63

Chapter 4  REST Web Services in WebSphere Liberty     65

What Is REST?     65

The Pieces of a RESTFul Web Service     66

Introducing JAX-RS     67

   Basic Concepts: Resources and Applications     68

   A JAX-RS “Hello World” in WebSphere Liberty     68

   Creating the WebSphere Liberty Server     74

   Starting the Server and Testing the Application     78

More JAX-RS Annotations     80

   Testing the New Example     82

JAXB and More Interesting XML-Based Web Services     82

   The JAXB Annotations     83

   A Trivial DAO (and Its Use)     86

JSON Serialization     88

   A Simple Transaction Example with JAX-RS     88

   Handling Entity Parameters with POST and the Consumes Annotation     90

   The Use of Singletons in Application Classes     91

   Testing POST and Other Actions with RESTClient     94

More on Content Negotiation     95

   Introducing the JAX-RS Response     97

   Hints on Debugging: Tips and Techniques     98

   Simple Testing with JUnit     98

RESTful SOA     101

Summary     102

Endnotes     102

Chapter 5  Application Architecture on the Glass     103

Why Well-Designed Applications Matter     103

Defining a Client-Side Architecture     104

Responsive Design     109

Client-Side Architecture     114

   Application Controller     115

   Model-View-Controller     116

   Error Logging and Management     120

   Data Storage and Caching     121

   Configuration     121

Introduction to the Dojo Toolkit     123

   Dojo     124

   Dijit     124

   DojoX     124

   Util     125

Why Use Dojo     125

Asynchronous Module Definition     126

Future of Dojo     129

Using Dojo in Your Application     130

   Section: HTML Declaration     132

   Section: Styling     132

   Section: Configure Dojo     132

   Section: Load Dojo     134

   Section: Initialize Application     134

   Section: Body Content     135

Creating Your Own Widgets     136

Building the Application     140

Summary     166

Chapter 6  Designing and Building RESTful Applications with Modern Java EE     167

Modern Java EE     167

   EJB 3.1 and CDI     168

   JPA     171

Application Architecture for Modern RESTful Systems     172

   Division of Labor: Defining the User Model and REST Interfaces     174

   Application Layers     179

Building the Application     185

   Loading the Example and Setting Up Liberty     185

   Test-Driven Development     190

   Building REST Services     195

   Domain Model     201

   Building DAO and Business Logic     205

   Running the Application     209

A Discussion on Choices     210

Summary     211

Chapter 7  Introduction to IBM Worklight     213

What Is IBM Worklight?     213

Elements of IBM Worklight     213

The IBM Worklight Product Family     214

Developing with IBM Worklight     215

IBM Worklight Deployment Architecture     216

IBM Worklight Server Architecture     221

The Structure of a Worklight Application     223

What This Means for You     224

Summary     226

Chapter 8  Building a Worklight Hybrid App with Open Source Frameworks     227

Design for the Hybrid Application     227

Overview of Frameworks     228

   jQuery     229

   jQuery Mobile     229

   Require.js     229

   Backbone and Underscore     230

   Handlebars     230

Building a Hybrid App with Worklight     230

   Setting Up the Project     230

   Worklight Adapter Code     233

   Worklight Hybrid App Folder Structure     240

   Examining the Application     242

   Running the Example     255

Summary     260

Chapter 9  Testing and Debugging     261

HTML     261

JavaScript     262

   Global Variables     263

   Asynchronous Module Definition (AMD)     263

   Context     264

   CSS     267

   Data     269

Unit Testing     269

The Browser as a Test Platform     272

   Exploring Chrome’s DevTools     273

   Essential Browser Plug-ins     279

IBM Worklight Specific Concerns     281

   Disabling AppCache for Mobile Web Apps     281

   Disabling Security for Cross-Domain Ajax in Mobile Apps     283

Remote Debugging     284

   Safari Remote Debugging     284

   Chrome Remote Debugging     285

   Online Code Snippit Runners     285

Summary     286

Chapter 10  Advanced Topics     287

Understanding Where Your Application Fits     287

Achieving Reliability Through Clustering     292

Versioning     292

   Versioning in the URI     293

   Versioning in the Header     294

Mechanisms for Improving Performance     294

   Pagination     295

   Caching Overview     296

   Response Caching     297

   Server-Side Caching with WXS     298

Security Issues for Modern Web Applications     302

Summary     304

Endnotes     305

Chapter 11  Key Takeaways of Modern Web Development     307

The Engaging Enterprise     307

   Mobile-First Development     308

   Web APIs     309

   Polyglot Programming     310

   Cloud Computing     310

Summary     313

Endnote     313

Appendix A  Installation Instructions     315

Development Machine Installation     315

   Installing Java Runtime Environment, v1.7     316

   Installing Eclipse Juno IDE, v4.3     317

   Installing IBM WebSphere Liberty Profile Developer Tools, v8.5.5     318

   Installing the Source Code for the Book Examples     319

Optional Development Tooling for Mobile Web Apps     321

   IBM Worklight Studio v6.0     321

   Android Development Tools and Eclipse Plug-in     324

   OSX XCode IDE     327

Server Installation     328

   IBM WebSphere Liberty Profile, v8.5.5     329

   Apache Derby, v10     330

Downloading and Installing Example Source Code     333

Summary     333

Index     335