Mindoo Blog - Cutting edge technologies - About Java, Lotus Notes and iPhone

  • Tools we use to build web apps

    Karsten Lehmann  21 September 2014 21:50:48
    In a recent comment in this blog, Andrew Magerman asked what frameworks I use to build web applications and whether we have looked into Angular. Since the answer got too long for a simple comment and might be interesting for others, I created this blog article.

    Server side
    I am using my own regexp based templating system, which simply fills some placeholders in static HTML and JS files and sends them to the browser, e.g. to compute URLs, to insert translated phrases and include content of other template files. I don't need much flexibility for this template system, because all dynamic stuff is created in the browser anyway.

    Data is provided via custom REST services implemented in Java that offer CRUD operations. In many cases, the server side application code uses framework classes from OSGi plugins that build a common layer shared between multiple web applications.

    Frontend stuff
    For the frontend, I use Bootstrap to build responsive user interfaces that work on phones, tables and desktop browsers. I use jQuery, lots of helper projects like bootstrap datepicker and timepicker, select2 for flexible comboboxes, velocity.js for animations, Asynquence to work with callbacks and other libraries that I tweeted about in the past.

    To wire them together I use require.js, which gives me a clean dependency resolution.

    React based UI rendering
    For more and more UI components, I use React for the rendering and their flux application architecture.
    I especially like their approach to reduce DOM changes by comparing old and new in a virtual DOM tree in memory when data changes.

    Another advantage of React.JS is that the initial UI code can be precomputed on the server side to improve SEO ranking (see this article).

    Normally, this is done in code running in a Node.JS server.

    For Java based server environments like IBM Domino, we have code to do this using the JavaScript engine of the JVM and as an alternative (with better performance thanks to Node's V8 JavaScript engine) by leveraging an external Node.JS process on the same or a different machine.

    Angular
    We haven't used Angular in real-life projects yet. Looking at the documentation, it feels as if they over-standardized web application development a bit, making it more difficult than necessary to get started.

    What concerns me is that their templating system does not seem to optimize DOM operations as good as React does. In the browser, it's all about responsiveness and performance.

    What I don't use
    Personally I prefer not to use JSF components or similar concepts for the web UI. I don't like to depend on a server state and don't like to have too much communication between frontend and backend.

    Instead I like to have most of the UI code in the browser so that the app is responsive even with bad network coverage. In addition, I can optimize DOM rendering and have more ways to play with animations and transitions.

    Communication with the server side is done through REST APIs that can also be reused to test functionality, automate tasks or for automatic data imports/updates.

    Domino?
    You may have noticed that not much of my way to develop web applications requires a Domino server.
    Having Domino on the server is a great thing, as it includes many services in one consistent platform, like the document database, fulltext search, directory services, replication and a close integration of application code and the mail server.

    But there's more than one way to skin a cat. We have prototypes in the lab that don't have any Domino dependencies.

    Since we like document databases combined with replication, we have been playing with the CouchDB eco system for some time:
    the Apache CouchDB project that is currently merged with the Cloudant database and the rcouch project as well as its mobile version Couchbase Lite and PouchDB in the browser.

    Combined with an OSGi based server platform, that looks like a powerful and extensible app dev environment.

    Comments

    1Andrew Magerman  22.09.2014 09:12:13  Tools we use to build web apps

    This is excellent, many thanks!

    2Sven Hasselbach  22.09.2014 10:19:50  Tools we use to build web apps

    Is there a reason for choosing CouchDB instead of MongoDB?

    3Michael  22.09.2014 11:18:29  Tools we use to build web apps

    The only - but major - concern with these "hipster" stacks is the explosion of dependencies on stuffs which, one by one, are promised to an unknown lifetime and tend to be very volatile. Nowadays, nodejs is considered cool...but I bet that in 2 years it'll be "hell" / forgotten as every web technology theses days (remember wicket ? struts ? etc...). And the same goes for JS client side frameworks...each day brings it's "better/smarter/stronger" framework. Angular seem already being "too mainstream" and "hipsters" look at webcomponent etc...

    4Karsten Lehmann  22.09.2014 14:16:43  Tools we use to build web apps

    MongoDB is fine, too. In our case, having the same application and data running on the server as well as on mobile clients was a big plus for CouchDB. The merge will also bring lots of new and missing features like scalability and sharding and a dynamic query language.

    5Andrew Magerman  22.09.2014 21:37:39  Tools we use to build web apps

    @Martin:

    I don't share your concern. The frameworks that Karsten mentions have large amount of followers, that should make them reliable.

    As to the future - I fail to see an alternative. Even the big companies shut things down (DB2 for Domino, Sharepoint on premise), make new versions which are not backwards compatible (Visual Basic 6 to VB .NET).

    Most of the time I find the 'new' stuff really good. JSON is such a relief after XML, where you're never sure whether the value you're looking for is an attribute of the tag, or what's contained between the tags. The front-end UIs are a blessing, do you remember having to hack every second line of HTML to get IE to work.

    It's clear to me that the skills that are needed are exactly what Karsten is doing, i.e. stick together loads of open-source frameworks. It's one level of abstraction higher than what we used to do, and it's the future.

    6Karsten Lehmann  23.09.2014 10:43:05  Tools we use to build web apps

    Yes, I pick frameworks where I have the impression that either I can fix issues on my own or the developer community is large enough and motivated to do it.

    For example, I have an application running at a customer where I used the following open source libraries:

    asynquence, bootstrap, bootbox, bootstrap-datepicker, bootstrap-timepicker, codemirror, font-awesome, footable, history.js, html5shiv, jquery, jsonlint, loadmask, moment.js, some polyfills, reactjs, requirejs, scrollintoview, select2, summernote, underscore, velocity, zeroclipboard, Apache POI, iCal4J and in addition lots of my own helper classes installed as OSGi plugins, e.g. to scan personal calendar entries, create new appointments in the calendar, i18n support, LDAP access etc.

    I think nobody would pay me to reinvent the wheel. The trick is to be subscribed to many newsletters and Twitter accounts and monitor what others build.

    And to be able to judge whether a project has high quality.

    7Mike Brown  25.05.2015 04:48:40  Tools we use to build web apps

    Great post, Karsten.

    I'd be interested in hearing more about you're doing with Reactjs on the server side and how easy/difficult it was to integrate Node.js and Domino to achieve that.

    8Karsten Lehmann  25.05.2015 18:00:00  Tools we use to build web apps

    Hi Mike!

    We have not used our server-side rendering in production so far. The solution was built for a pretty large web project that is about to go public in a few days (the project started in September 2014), but we currently only render the web page in the browser.

    We basically launch a Node.js based web server on its own port and use Apache HttpClient from Domino to post the path to the template file in the server's filesystem and the application state in JSON format and get back the rendered HTML, which is inserted into the web page.

    The template filename contains a hash that we compute from the template content so Node.js reloads the template when it has changed.

    9Mike Brown  28.05.2015 08:32:58  Tools we use to build web apps

    Sounds cool, Karsten!

    I'd love to see a fuller article about that if/when you ever get the time.

    For now, can you tell me what you mean by "Apache HttpClient from Domino", please?

    - Mike

    10Professional web app developer  12.06.2015 13:52:19  Tools we use to build web apps

    These are the best tools which professional developers used to develop web apps.