Modern Web Development

In the last few years web technology has lived through rapid growth and heavy change. We went from frames to table layouts, to column layouts, to responsive layouts. From html4 to xhtml & flash to html5. From heavy server to rich client. From rpc to soap to rest. From sql to nosql and big data. From MVC to MVP and so on. In the following post i want to describe what has become state-of-the-art from my perspective.

A Backend is a REST api 

Every backend should be seen as a REST api and every controller as another resource. You want to analyze your problem domain, find your resources and design proper paths for them. They become the M in your MVC Architecture. Developing a webapplication first, and adding an extra REST api later on has to be considered an antipattern. If you do make a REST api, you want to consequently use it yourself, making your frontend its first consumer. This procedure allows you to smoothly add different kinds of clients later on, such as a mobile app or even a desktop application. It's also the foundation to integrate your applications features into other applications.

Separate your Frontend

The days when you made up a form using jsp with a jstl form validation are fading. You don't want to mix client with server technology anymore. The V and C of MVC has shifted over to the client and your backend just represents the Model. You want your frontend to be completely separated using client technology only (html/css/js) and consuming your REST api. GUI logic, building and aligning proper html elements can be achieved within javascript. The most appropriate content-type for information exchange between the backend and frontend would be json or even xml.

Rich Client & Hail JavaScript

The MVC pattern is nowadays implemented on the client side using javascript and it's fellow frameworks. There is no full-blown complete javascript framework that can achieve everything out of the box, but there are tons of smaller libs solving atomic tasks. This should not be considered bad or overwhelming, but advantageous. It causes a great variety of tools that focus on solving single problems outright. Backbone is a popular mvc framework built upon underscore, a js library delivering great utility with remarkable functional programming features. A template engine like mustache or handlebars could be added and requirejs would manage the dependencies within your modules. Of course, a dom manipulator like jquery cannot be left out. The trend is leading towards SPA's (Single Page Applications) with heavy AJAJ/AJAX, routing through html #anchors representing bookmarkable view-states.

Implement a Buildprocess for your Frontend

As Browsers are continously increasing javascript performance and adding more and more support for html5, frontends have become complex and sophisticated. You now want to add a build process for your frontend, compiling all your js and css files. You want to deliver only a single minified js file to the browser. Other than that we don't break the DRY principle writing styles anymore. We use dynamic stylesheet languages like less to make our styles smarter and cleaner and compile them to css in our build process. Node and rhino are possible engine candidates to build your frontend. While node is much faster, it requires an easy installation on the build server. Rhino runs in a jvm, thus not requiring an installation. You can add it to your project as a maven dependency.

Mobile Web & Responsive Design

Mobile devices are becoming more powerful in terms of hardware whilst html5 support is also rapidly increasing on mobile browsers. Html5 could potentially make native mobile applications obsolete one day. Localstorage, SQL, Geolocation, Multimedia, Camera Access, Web Sockets, Graphics, Touch Events, WebGL, Filesystem Access, Notifications and many more are all features to be completely available to mobile html5 webapplications one day, hopefully working on all devices. So far, we have been developing multiple applications for android/ios/windows mobile and so on, being an economic nightmare.
Mobile clients have gained a substantial amount in web consumership, and cannot be ignored anymore. Therefor you want to make your GUI reponsive, beeing able to scale down to smaller display-resolutions. Wise companies have even started designing userinterfaces for the smallest resolution before even thinking of a desktop resolution. This makes scaling more easy, since the other way round is harder and tends to force painfull workarounds. Bootstrap is one of many libraries that help you make your gui responsive. You can use initializr to get started.

GWT or ZK Framework? Use Neither!

GWT/ZK are trying do deliver a framework that makes it possible to develop modern ajax web applications using Java only. So they are basically building a java wrapper for frontend technology. Other than that, they deliver a huge amount of components. BUT ... i'd like to question their philosophy for many reasons.
  • They Both produce quite bad html code making you end in an element and dom-id nightmare that gets hard or even impossible to test, debug and style. Html5 allows to write short, clean and readable code, organized way better. You want to write html yourself.
  • Their AJAX calls are not based on the REST api that you need. If you want a REST api, you may have to write that again. RPC is GWT's primary communication-technologym and i am really concerned about that. But you can still make a REST api work with GWT if you like to.
  • They keep you away from the technology that you are actually producing. Tiny customizations can get hard or even impossible in the end. You are basically giving up control and limiting your possibilities. This might in many cases lead to dead ends, that are based on the framework, not the technology. GWT helps to overcome this problem offering JSNI.
  • They are never up to date. While browsers are evolving rapidly, new features have to be implemented in the Java-Wrapper before you can even use them, delaying your up-to-dateness.
  • I doubt that wrapping native front-end technology is a good idea, and i don't see a reason for doing it. One pro GWT argument might be: it's generating optimized JS code.
In the end they make it easier to build webapplications for former java.awt/swing developers, who have no to little knowhow of html/css/js.
They defintively have their place right now and aren't a bad choice in some cases.

Comments

Post a Comment

Popular posts from this blog

How to Open QR Codes

Image
I feel like it's been forever since I blogged... the beginning of the school year has been beyond crazy!  Well, I'm back to share with you a quick and easy tutorial: how to open up a QR code!  QR codes are all the rage today so I hope this help you feel more comfortable with starting to use them! Here is the poll! Now for the tutorial... You can download this tutorial as a PDF by clicking this picture! Note: This tutorial is hosted on Google Drive.  To save it from there, just open the file and click File > Download to save onto your computer! Of course, this intro QR code tutorial of course means that I'll be adding another QR code tutorial to the poll: how to make pretty QR codes (if you're going to take the time to do it, you might as well make it look good!)
Read more

Jim Henson predicted the end of the world

Or more accurately, Brian Henson did. But more on that in a second... I read an article today about the BP oil spill, and some analysts think the oil spill won't end until Christmas. Meaning 4 million barrels oil would be dumped in the Gulf. And (I'm quoting) "That much oil would wipe out all life in the Gulf and completely change the ecosystem." (read the full story here ) Let me repeat that:  That much oil would wipe out all life in the Gulf. In less than a year, those greedy bastards and their lack of foresight will probably lead to the destruction of an entire ecosystem.  Fish, crabs, eels, dolphins, sea turtles, and all the plant life. Here's a list of how and what animals are effected by this: here . This doesn't even mention the economic damage it will do to tourism and the jobs of people who thrived on fishing and dependency on the Gulf life. One more time: That much oil would wipe out all life in the Gulf. Let's put aside how devastating it is to ...
Read more

Mega Giveaway! (Today only!!!)

Image
Okay, I admit it... I have been slightly neglecting my blog, but not because I haven't been doing work!  I've been working hard to prep for the new school year and for the Phonics, Vocabulary, and Comprehension PD that Katie (over at Kdot's Learning Spot ) and I have been working on! Well of course, this big TPT sale coming up tomorrow has inspired me to post a few of the things I've been working on!  And of course, to repay all of you for continuing to follow me even though I'm posting less frequently... I think I'll give away ALL OF MY NEW ITEMS today! :) And of course, if you don't win, all of these products will be on super sale tomorrow and Monday! (Props to Krista  from  The Creative Chalkboard  for the amazing sign!!) Now... let's see what you can win! I'm going to start with the project that took me the most time.  I made videos that are about 5 minutes long each for each letter of the alphabet!  And even though the video itself is only about...
Read more