music and code by Gazbond

AngularJs

Marketplace web development stack


Categories: AngularJs, ElasticSearch, PHP, Yii2

I’ve witnessed many web application development trends over the last 10 years or so. From server side component tree frameworks such as JSF to MVC frameworks such as Ruby on Rails and client side heavy approaches such as YUI.

How you approach web application development can be very complex and many of the approaches have similar aims and focusses such as separating application logic and data from UI. There are also varying levels of complexity in learning and utilising a particular approaches tools and conventions, which can make it time consuming to evaluate available options.

So when choosing an approach and the various tools and frameworks you’ll need, many factors come into play – speed and agility of development, availability and cost of personnel with the required skillsets, ability to scale an application to handle the amount of users you’ll be serving etc.

Currently SPAs (single page applications) are very popular, with large tech firms such as Facebook and Google offering their own solutions for developing these kinds of web applications - React and AngularJs respectfully.

Always keen to improve the development process and try new tools and approaches I decided to implement a demonstration web application using PHP and the Yii2 framework for the backend, and RequireJs, Gulp and AngularJs for UI.

The web application is a marketplace for buying and selling tickets to wellness events – meditation, yoga etc – utilising Stripes marketplace payments solution called Connect.

PHP and Yii2 framework might seem like an odd choice considering the popularity of Node.js and the availability of JavaScript developers at the moment. But when it comes to developing backend web services for an SPA, the class based object orientation of PHP plus the component based MVC architecture of Yii2, and in particularly its ORM (object relational mapping) and RESTful API tools, provide a quick and robust method for creating web services that include authenticationauthorization and various options for data sources and caching.

PHP has come a long way over the last few years and now includes namespaces, a package manager called Composer and class loader functionality that make it really easy to add 3rd party PHP code to your project.

Yii2 framework utilizes these features of PHP at its core so that various 3rd party extensions – such as the ElasticSearch extension - can be integrated seamlessly alongside Yii2′s ORM and RESTful API tools.

The combination of the above allows you to create a relational database design for your web application and setup search indexes that automatically update when the relational database updates, allowing an application to do most of its reads from search indexes whilst writing updates to the relational database.

The marketplace for wellness events uses ElasticSearch’s geo-distance filter in combination with Google’s Maps API – to convert location addresses to map coordinates – so that users can search events by location. The relational database is the master data storage here, but ElasticSearch indexes are used to compute search results.

Yii2′s RESTful API tools make it really simple to map your data onto web service endpoints with authentication, authorization and CORS security (more on web services security in another post since there are subtleties involved in understanding security within SPA’s).

The application’s SPA UI uses AngularJs v1.4 with the ui-router module so that UI code can be divided into multiple hierarchical state configuration files, as well as controller and template files. RequireJs is used to load these files and manage the order they are loaded. This also helps when concatenating and minifying UI files into one single file, using Gulp, for the final production version.

The bootstrap process of AngularJs has to be delayed in order to use RequireJs with it. This can be done by setting a flag on the DOM – see deferred bootstrap - and organising your files so that they are all loaded before resuming the bootstrap process.

Its also a good idea to avoid any of Angular’s automatic dependency injection capabilities and always use the array syntax with string names of dependencies followed by a function as the last element of the array. This makes sure that minifying doesn’t interfere with dependency injection.

AngularJs is in a state of flux at the moment in my opinion because v2 is a significant move away from previous versions. It seems to have adopted many similar features to React such as off DOM rendering and is also built using TypeScript which is quite a departure away from the functional programming style that dominates the JavaScript world.

Here are some screenshots of the marketplace web application:


wellness2
wellness3

Comments are closed.