Matt RaibleMatt Raible is a Web Developer and Java Champion. Connect with him on LinkedIn.

The Angular Mini-Book The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

20 Things You Didn't Know You Could Do With Apache

Apache HTTP Server During my mod_rewrite adventures, I discovered an interesting presentation by Rich Bowen from last year's ApacheCon. It's titled "20 Things You Didn't Know You Could Do With Apache" and you can download the PDF. While writing this post, I found a couple of other interesting presentations that Rich wrote: Introduction to mod_rewrite and Apache 2.2 Rocks! Good stuff Rich - thanks for sharing.

Posted in The Web at Apr 17 2007, 07:46:11 PM MDT Add a Comment

[TSE] Building Modern Web Applications with Mike Stenhouse

Mike Stenhouse is the creator of the CSS Framework we use in AppFuse. Mike is going to talk about the tools he uses to develop web applications. Mike works solely on the front-end, no backend work.

"In 2007 we’ll witness the increasing dominance of open internet standards. As web access via mobile phones grows, these standards will sweep aside the proprietary protocols promoted by individual companies striving for technical monopoly. Today’s desktop software will be overtaken by internet-based services that enable users to choose the document formats, search tools and editing capability that best suit their needs." -- Eric Schmidt, CEO Google

Web Standards is a methodology and philosophy, not just valid CSS and XHTML. The main philosophy behind web standards is progressive enhancement. The methodology behind web standards is a 3-step process.[Read More]

Posted in The Web at Dec 10 2006, 08:51:40 AM MST 2 Comments

Label placement in web forms

From Swapnonil Mukherjee:

Matteo Penzo has published an excellent article about the placement and alignment of labels in data entry forms. His research, though much more scientific and thorough, confirms what I had said earlier, about the importance of right aligning form labels.

Screenshot of User Profile In AppFuse 1.9.2, we added support for the CSS Framework and Wufoo-style forms. The new form layout appears to satisfy many of Matteo's suggestions. The only things we aren't doing are: 1) we're using bold labels instead of plain text and 2) we're using labels for drop-downs, instead of making the first element the label. I suppose the bold labels isn't much of an issue b/c we're not using heavy input borders. As for labels and <select> elements, I think the way we're doing things is good enough. If it works for Wufoo, it works for us!

Posted in The Web at Aug 22 2006, 12:43:01 PM MDT 7 Comments

Ajax on Rails with Stuart Halloway

There's a number of presentations I'd like to attend during this time slot. In particular, I'd like to attend Testing with Selenium and Simplified Ajax Development in Java with ICEfaces. However, Stuart Halloway is an excellent speaker and I'd rather hear him talk than learn something in another session. Hopefully other attendees blog about the aforementioned sessions so I can still learn something from them.

Agenda: Ajax, Libraries for Ajax (i.e. Prototype and Scriptaculous), Rails and Ruby.

There's probably 100 people in the room. Stuart did a survey of who is using Rails - I'd say the response was about 10%. He also asked who's considering it for future development. The response seemed to be around 25%. I'm sitting in the front of the room, so I probably didn't see the results as well as Stuart did. Regardless, it's interesting to see that most people in the room won't be using Rails, they're merely interested in it (or they wouldn't be in the room, right?).

The best way to play with Rails on Windows is called InstantRails. For OS X, there's Locomotive.

All the demos given during this session are available in the ajax_labs section at codecite.com.

Things we're going to look at: autocomplete, in-place Editing, searching, sorting, expando, drag and drop, sort, server-side validation, client-side validation, and prototype windows (Stuart prefers to call them divdows).

Stuart is talking a lot about how Rails works at this point, model objects, yml files, tests and sample data. One of the things that I find interesting about most CRUD-generation frameworks is they don't take tests into account. Ruby on Rails generates tests, so does AppFuse. If you work on a CRUD-generation project for web development, do you generate tests too? If not, don't be embarrassed, tell us. There has to be a good reason you're not doing this.

Now the audience is struggling with the concepts in Rails, how ActiveRecord works, etc. For example, one guy asked if it's possible to use JDBC with Rails. It's definitely a humorous question, but Stuart handled it quite well without ridiculing the guy. A couple of notes: Rails doesn't work well with stored procedures or composite keys.

Now we're looking at the view layer, in particular a show.rhtml template. It's pretty simple , but not very HTML-ish. Looks a lot like scriplets in JSPs. Autocomplete with Rails is mostly CSS-driven. To use it in a Rails view, you start with the following line of code at the top of your template.

<%= stylesheet_link_tag 'autocomplete' %>

In Rails, when you want to render an Ajax response in a controller, you use the following at the end of your method.

render :layout=>false

This turns off any page decoration. It'd be nice to have something like this in the Java world - so you could turn off page decoration from SiteMesh, Tiles, etc. It shouldn't be hard to implement this in SiteMesh, but it might take a bit of work for Tiles.

Partials are Rails' way of creating fragments that are designed to be populated and returned by Ajax calls. Their naming convention is to being the filenames with an underscore. For example <%= render :partial=>'search' %> looks for a _search.rhtml template.

For Ajax development with Rails, you're not tied to using Prototype or Scriptaculous. However, since Rails has helper methods that emit the JavaScript, it makes things much easier. If you'd like to use Dojo, you'd have to hand-code the JavaScript into your RHTML templates, or write helper methods for Dojo. Stuart would like to see a Rails plugin that allows you to switch the Ajax helpers from one library to the other.

The last thing Stuart showed was Prototype Windows. This looks similar to lightbox gone wild, except you get better styling around the modal window. If you haven't heard enough of what Stuart has to say, checkout blogs.relevancellc.com. One of the most interesting things lately is he's been posting reviews of the various Ajax books.

Posted in The Web at May 12 2006, 01:35:41 PM MDT 5 Comments

Ajax and Open Laszlo with Max Carlson

Max is the co-founder and Lean Runtime Architect for Laszlo Systems. Max doesn't look at all like I pictured him (do they ever?!). He looks like a heavy-duty engineer, long curly hair, a little rough around the edges. I respect him more already. ;-)

Laszlo Systems Background: company founded in 2000. Laszlo Presentation Server (LPS) released in 2002. Embraced open source; LPS became OpenLaszlo. 2005: it's been widely adopted (130,000 downloads to date). This year, they're extending OpenLaszlo to support multiple runtimes, including DHTML. The company makes money of training and support, as well as developing custom applications (i.e. Laszlo Mail) and modules.

On 2/1/2006, Laszlo Systems joined a select group of tech leaders in establishing the Open Ajax community. Jointly committed to "making it easier for an open source community to form and popularize Ajax."

Demo's: Laszlo Mail, Pandora, Barclay's and Gliffy.

Developing with OpenLaszlo: XML-based, use your favorite XML editor. It's source-control friendly and has a library mechanism (for modularization). It's a familiar methodology for software engineers. It has standard OOP features: attributes and methods, class definitions with inheritance, familiar design patterns apply. There's an emphasis on declarative constructs. Finally, there's an open source Eclipse-based IDE4Laszlo. Originally developed by IBM, among the most popular downloads on alphaWorks. It now contains a WYSIWYG tool and is hosted at http://eclipse.org/laszlo.

LZX: Laszlo's XML Application Description Language: Flash independent tags and APIs (no ActionScript, movieClips, etc.; no need for Flash development). This allowed them to easily port to a different runtime. With OpenLaszlo, you can interface with your server via XML over HTTP, SOAP, XML-RPC and Java RPC. It has a runtime constraint system, hierarchical data binding with XPath. It has media, streaming support (although the Flash runtime seems to load images real slow - see the DHTML vs. Flash demo on http://openlaszlo.org).

Now Max is going through the Laszlo in Ten Minutes tutorial. If you haven't seen this, you should definitely check it out. It's a good quick introduction to OpenLaszlo. One of the unique features of OpenLaszlo is its components are written in LXZ. Compare this to XUL (components written in C) and Flex (components written in Flash) and it seems a lot more open.

In order to solve the nested-for-loops problem with JavaScript and DOM-manipulation, OpenLaszlo uses XPath and turns for loops into simple URL-like expressions. For example:

<text datapath="dset:/employee/firstName/text()"/>

Noticed on Max's Firefox toolbar: a del.iciou.us menu.

For the last 1/2 hour, Max has been talking about LZX, how to handle events, etc. In other words, since I've already worked with OpenLaszlo a bit, I haven't learned anything new.

Now Max is talking about OOP and how you can declare classes with certain attributes and then re-use them. It's kinda like Spring's "abstract beans" where you can declare a template bean and override attributes in child beans. In addition to allowing classes to be declared with no parent, you can create classes that extend an existing class. A common usage is declaring default values and then overriding visual elements (i.e. border size, colors, etc.).

OpenLaszlo 4.0 (with Ajax support) is targeted for a release by the end of the year.

Personally, I think OpenLaszlo is a very cool technology. However, it definitely needs a better IDE IMO. The last time I tried IDE4Laszlo on my Mac, it wasn't even close to useable. From a development perspective, using OpenLaszlo was difficult to work with because I felt like such a moron. With HTML and CSS, I know how to program UIs and it's difficult to give up that knowledge and rely on something else to provide the look and feel of my UI. In reality, I'm simply frustrated with my OpenLaszlo skills and would likely feel different if I was paid to develop a real-world application with it. After all, getting paid to work with a particular technology is almost always the best way to learn it.

Max is a great speaker and did a good job of introducing OpenLaszlo. Furthermore, this was one of the most interactive sessions I've seen at this conference. There's definitely a lot of folks interested in this technology.

Posted in The Web at May 12 2006, 11:50:24 AM MDT 1 Comment

CSS Framework Design Contest: Final Results

20 people voted for the css design contest runoff. Of those, 3 people voted after the Tuesday midnight deadline. Here's the final winners of this contest:

  • 1st place: puzzlewithstyle by Mattias Fjellström
  • 2nd place: andreas01 by me (the question is: should I win or Andreas Viklund - the original designer?)
  • 3rd place: simplicity by Herryanto Siatono

The 3rd place winner was a close call: deliciouslyblue tied with simplicity, but 2 votes came in after the deadline. Congratulations to all the winners - and thanks for helping out with this contest.

Since I'm traveling in San Francisco this week and next, it'll probably take me a couple weeks to send out the prizes (iPods) to the winners.

Now for hard part: integrating the entries into AppFuse for 1.9.2. I hope to make all the winners AppFuse-compatible and ship them (or make them downloadable) as part of the release.

Posted in The Web at May 11 2006, 10:23:42 PM MDT 9 Comments

Lessons learned building a 130+KLOC JavaScript application by Scott Dietzen, CTO of Zimbra

Scott Dietzen is the former CTO of BEA. Apparently he was one of the original founders of WebLogic, before it was bought by BEA. Scott's hope tonight is to share his experiences from developing Zimbra. Why does Zimbra use JavaScript and Ajax?

  • Richly interactive UI
  • Rich client/server communications
  • Zero-cost administration
  • Web security
  • Web look and feel (back button and bookmarks)
  • Multi-browser "standard"

All of the above features where things the Zimbra team expected. They also got lucky in a number of areas.

  • SAO/Mash-ups and Ajax authoring
  • RIA winner? Big sites voting with their feet: Google, Microsoft, Yahoo, Amazon, etc.
  • It really works

They started building Zimbra 2.5 years ago, long before Ajax was possible. Scott actually tried to talk his team out of using JavaScript when they first started architecting the application.

Zimbra's tools are good for Java programmers. If you're not familiar with OO concepts, it might be a bit difficult to understand. Now Scott is showing some demos, basically grids and trees - all built using the "Zimbra toolkit", whatever that is. Now he's moved on to demoing the Zimbra application itself. I used Zimbra as my primary e-mail client for a couple weeks and it's by far the best web application I've ever used. Not only does it look awesome, but everything works just as it would in a desktop application. The unfortunate thing about Zimbra is it has two licenses: an open source one and a pay-for version that has all the features you really want.

Zimbra = "Pure" Ajax. All UI behavior specified in JavaScript. The *entire* UI is written in JavaScript, no HTML. It's more like a typical GUI application from a programming perspective (think JavaScript SWT). Result is "husky" client 3-tier architecture. All UI on client, server-side Java code for UI operations. This is very different from HTML "design center" where you start with an HTML page and augmenting with Ajax. The Zimbra toolkit actually doesn't fit very well into most applications, where folks enhance HTML pages. It's more designed for programmers who want to write their entire application in JavaScript.

Ajax is finally giving us a clear partition between client logic and server logic. The dividing line is up to the developer, that's the challenge for web developers today. It's basically a user-defined SOA Endpoint. Before Ajax, in the Java world, JSPs and Servlets were considered the client-side, even though they were really more server-oriented.

Ajax applications are cheaper on the server/network than Web 1.0/HTML apps. Modulo the initial download (gzip is essential). Ajax is much more expensive on the client CPU. Tend to be finder grained in their client/server interactions. They tend to be more stateful. Rule #1: Pick your service bindings well! For modularity and re-use/mashups.

"There's a special place in heaven for whoever had the patience to get all of that JavaScript right." - Paul Ambrose, WebLogic Founder on Zimbra

Ajax Challenges: Browsers and Toolkits. Browsers render the same HTML differently, they have different event models, different levels of DOM supported, they have different APIs that do the same thing, as well as many issues. As far as toolkits for Ajax, there's too many rather than too few. Consolidation would definitely be a good thing.

Zimbra's Ajax Tookit (AjaxTK), Apache Kabuki* is modeled after SWT. It's a JavaScript OO class library and open source (Mozilla or Apache licensed).

Another big challenge is lack of integrated tooling. There's lot of technologies to deal with concurrently: HTML, CSS, JavaScript, etc. The initial stab at a solution is the Open Ajax Initiative. This is largely a set of technologies from Eclipse, Mozilla and Apache. There's 30-odd companies involved with the initiative, including: IBM, Zimbra, Eclipse, Firefox, Apache, Google, Yahoo, Oracle and Red Hat (or at least that's the logos Scott has on his slides).

The proprietary Ajax Landscape consists of MS Visual Studio (Tooling) and MS Atlas (Toolkit). On the open source side, there's Eclipse+Mozilla for tooling and all kinds of frameworks for toolkits (i.e. Zimbra/Kabuki, Dojo, Scriptaculous). Scott's opinion is there's really no room for any proprietary vendors to provide solutions outside of Microsoft.

Now Scott is doing a demo of mash-ups in Zimbra. He's showing how you can mouse-over many things in an e-mail message to get the information you're looking for w/o switching to a new page/context. Mash-ups he showed include: real-time flight information, displaying schedule for a particular day, dragging a message to an SMS sender, viewing a map by mousing over an address. The latest thing they're working on is dragging an appointment from a calendar to a "travel agent" that books your flight.

Zimbra also includes a WYSIWYG authoring environment for documents. It allows you to do HTML editing (in design view) as well as embedding spreadsheets within pages.

Zimlets: extensible mash-ups for e-mail, calendaring, IM, etc. They're a merge of "pull" and "push". There's zero-client install and they're secure because they're managed by the server administrator. To create a Zimlet, you develop a declarative XML template (Regex, ActionURL, XSLT, CSS, Menu). JavaScript can be used to override Zimbra client-based classes. JSPs can be used on the server-side for customization. Ajax Linking and Embedding (ALE) is Ajax components that are embeddable in editable HTML (simple docs, spreadsheets, etc.). Views are read-only HTML and WYSIWYG Ajax authoring (Ajax cod is the "authoring" application).

Practical Tips for Ajax:

  • Use an Ajax toolkit
  • CSS is your friend
  • Use JSON (as well as XML)
  • Use asynchronous network programming
  • MVC paradigm worked for us
  • Tooling better, but rough edges remain
  • _all.js -> jsmin (saves ~ 1/4X)
  • _all.js, _all.css -> gzip (saves ~ 3-4X)
  • Mercury's QuickTest-Pro (QTP) [IE + FF*]
  • Pick your fights - not all applications need to be Ajax enabled
  • No such thing as secure client-side business logic in Ajax
  • Dedicate some top UI OO talent (or wait for tech to catch up)

Ajax Sweet Spots:

  • Richly interactive UI desirable (HTML simplicity is ideal for many applications - for example, you'd rather use Amazon's one-click than drag a book to a shopping cart)
  • Combine with web look and feel and deployment
  • No client-side data/resources (but is changing, stay tuned)
  • Perfect for on-demand services

Recipe for Ajax Success: Ajax is not a business model, compelling and appropriate innovation is essential.

Next Ajax Steps: In open source land, try the OSS toolkits, Eclipse ATF and participate in Ajax communities (Apache/Zimbra, Eclipse, Mozilla, Dojo, Scriptaculous). Scott moved to fast for me to catch his recommendations for Microsoft developers. He did have positive things to say about Microsoft though.

Hardest Ajax problem of all? Recruiting. According to Scott, it's incredibly hard to recruit people that know Ajax.

Update: Additional coverage of this talk is available at Ajaxian.com.

Posted in The Web at May 11 2006, 09:54:26 PM MDT 7 Comments

Yahoo's Grids CSS

Available Templates When I first saw Mike Stenhouse's CSS Framework, I was very impressed. It's hard to believe it's been a year since I first saw it, and only now am I integrating it into AppFuse. It figures that the week I'm implementing it, Yahoo comes up with something better: Grids CSS. Thanks to Jacob Hookom for e-mailing me the link.

The features of Grids CSS include:

  • Full A-grade browser support
  • More than 100 page layouts with a single CSS file at just 1.82KB
  • Flexible scaling with user font-size adjustments
  • Min-width enforcement, regardless of font or viewport size (except IE; helper JS under consideration)
  • Abundant DOM hooks for CSS and scripting flexibility
  • Source-order independence, allowing you to place your most important body content first in your HTML document
  • Self-clearing footer (no matter which column is longer, the footer stays at the bottom)
  • Centering within the viewport by default
  • Forward-compatibility as standard page structure evolves to claim more screen real estate
  • Accommodation for IAB Advertising Units

This is obviously a better solution than the CSS Framework, especially since it seems to be well-documented and allows source-order independence. However, it suffers from a similar problem: there's a lack of good-looking designer-styled templates that showcase how cool this library is. There is hope though, Andreas Viklund (a well-known open source template designer) is talking about a Modular CSS Template. The question is: will he re-use Yahoo's Grids CSS or invent his own?

[Yahoo's Grids CSS] is almost exactly what I was working on - but much smaller and probably better than I would have done it. The main difference is that I added a few extra layers to the cake: Make-up (layout-wide styling for typography, forms, headers, links and so on), Colorscheme (just what it sounds like) and Backdrops (background images). Designers can add each layer separately. If you have a site based on the template and you want to change the styling - add a new Make-up. It is a matter of cutting and pasting blocks of code into the CSS, even a beginner with no CSS design skill can do that. If you want to use different colorschemes for different pages - just add more colorschemes and call it from the colorscheme class of each page. One line of code to change, and the effect is very obvious?

It's cool to see there's lots of work going on in this space. While AppFuse 1.9.2 will include the CSS Framework, there's nothing stopping us from using a different solution for 2.0. I'm leaning towards moving to Yahoo's solution, but it's likely I'll be heavily influenced by Andreas' work in this space. Of course, since Yahoo's library is open source, it might make sense for Andreas to simply contribute to this project and improve what they've already done.

Posted in The Web at May 11 2006, 10:58:24 AM MDT 7 Comments

CSS Framework Design Contest Winner and Runoff

I've tallied the votes as posted to the mailing list. Here's the results:

Congratulations to Mattias Fjellström for his winning Puzzle with style entry! The themes not listed here received 2 votes or less.

Based on these results, it looks like we need to have a runoff vote (for 2nd and 3rd place) between andreas01, deliciouslyblue, madeyourcss, fuseapp001 and simplicity. To place your vote, send an e-mail to [email protected] with "My favorite runoff theme is XXX" in the body. Voting will end at midnight (MDT, GMT-6) tomorrow night.

NOTE: "madeyourcss" had 6 votes sent to the mailing list, but 3 were from the same person. It might have been 4 that were sent from the same person, but since there's a runoff, I decided to add it to the mix.

Posted in The Web at May 08 2006, 02:54:03 PM MDT 3 Comments

Studio7Designs

Andreas Viklund is the original designer of this site's layout. Last night he pointed out a cool new site that showcases another set of open source web design templates.

Aran and Pat, also known as open source template designers Nautica and snop, have launched a new and extremely pretty website: Studio7Designs.com. The site is announced as a "network of professional designers", and it will show off both open source website templates and stock photography. Pat is one of the designers whose work I truly admire (see the Lazy Days template to understand why) and Aran's Nautica-templates are great examples of the simple design style that I like, so the site is well worth a visit.

Like Andreas, I think their Lazy Days template is truly awesome. I wonder how hard it would be to port it to the CSS Framework?

lazy days

Posted in The Web at May 03 2006, 06:33:13 AM MDT 5 Comments