Combining Development Platforms

How to combine different client side and server side platforms to achieve the best results when developing a new application.



This article is in regards to Guillaume Breux article, "Client-side vs Server-side vs Pre-rendering for Web Apps", in TopTal Blog. You can read Guillaume's full article here.

There was a time when I believed you should select the best platform for the application you are using and stick to that and only that.

Selecting one client side development platform and one server side development platform was key to achieving a clean code with perfect compatibility and minimal integration issues. Also, deciding witch of the platforms will do most of the work was a crucial state: it had to be either a client side system (using Angular, React, etc.) with light support from a server side language to retreive data, or a server side system with full SSR and light support from a client side library (jQuery for example) for DOM manipulation.

I quickly realised that each platforms or library had it’s pros and cons and while for each one as a standalone had more pros then cons, one could achieve a complete solutions while suppressing the cons using a combination of those platforms. Creating a combination between those platforms, and the verious rendering methods allowed me to take the best of all world, and maintain high security, creativity using DOM manipulation and a great UX experience.

For the sake of this blog post I will describe a system I built to maintain users and administrator and their data. The system was built using PHP on the server side, while on the client side I used a combination of Bootstrap 4, jQuery, AngularJS and OnsenUI.

First we'll start with the login procedure. I have used PHP to render the page and take care of the data extraction and security check, while I used jQuery for DOM manipulation, shifting from the login page to the registration page and the lost password page without an actual page load. I used both client side and server side verification to check for the integrity of the data sent by the user and it's origin.

Once you are logged in into the system it's a whole new ball game.

The surrounding framework of the system (top bar, user and notification menus, and side menu) is rendered using SSR and manipulated with jQuery.

The module itself is loaded using AngularJS for data manupulation, OnsenUI for DOM manupulation and navigation, and PHP as a server side model.

By doing so I have managed to achive a system that loads very fast as the surrounding framework is loaded using SSR, without any load inside a module thanks to AngularJS two way binding and factory services, and a great UX with OnsenUI combined with Bootstrap 4.

Using more then one language in a project is considered bad practice, but after much consideration I came to the realisation that using PHP for server side rendering, jQuery and/or OnsenUI for Dom Manipulation and Navigation and AngularJS for data manipulation, made my project more responsive, with shorter development cycles and a lot less maintenance required to achieve my final goal - a working, scalable and maintainable application.

Don’t be afraid to break the barriers of common practices. Trying and failing is an important aspect of being a web developer. Once in a while you might stumble upon something that will advance your knowledge, your experience, and your technological level.

Image
Amit Aisikowitz
CTO & Founder @ Pixel Group