Choosing of SPA (and finally AngularJS)over conventional website was coming There were many reasons but we could sum up most important in three points.
- Web application (from the point of real user interaction)
- Ease of flexibility in adding features
- API-driven development
Note that SPA framework rather than library, because framework is usually somewhat opinionated and telling you how to write code rather than library which basically is tool which just does small scale level work and you fiddle out how overall application should work. To picturize properly think of library as Mercenary it can be good for small things in fact too quick but you can’t win war with only mercenaries ,and framework as of proper armies, slow sometimes due to paperwork but does the proper job.
>Web application
Well though need of API driven development is due to in case of Mobile Applications but the most important reason was performance and more importantly our ability to change our source code . Now initially it was more of Website but once we sat down to fine tune details , then I realized that it was more Web App or these days it goes by the name of SPA. It was application based rather than information based(like fashion blogs and online news portal). This was big change for us since even now I consider myself back end developer rather than front end developer. In fact all of my projects are powered by Bootstrap and before you front end devs drop Napalm on me I repeat I am back end developer. We could have gone to basic JavaScript to do that, and it is not that it can’t be done but there were so many things which in technically sense you could do it yourself but at the cost of point 2 I made above. Rather we wanted our main focus on creating applications and adding more features without breaking application or going haywire without the help of SPA framework. I have always believed that if you enjoy developing a software eventually it turns out to enjoyable to end user as well .We wanted our app to work like regular application like Notepad, Microsoft Word, ,TextMate , VIM ,Chrome and etc. More an application looks and behaves like it should more chances of people actually liking and using it. Next thing was speed in usage. According to google people do react strongly against page redirects along with slow page reloading. Now of course long gone are days of Dial up modems and more and more people are using high speed internet than ever before.Also it depends much on user ‘s ISP prowess, but still user will still prefer speedy fast experience.
Oh you wanted to spend 30 seconds on our web application so that you can continue doing your work, but hey why I don’t I reward you with whole page refresh with redirect and turn this minuscule 30 seconds into horrible 3-5 minutes while you scratch your head.
SPA framework does all this without giving you headaches on how to get it work. At EvilDevelopers we knew this is what we wanted.
>Ease of flexibility in adding features
One thing which I wanted to be from start was rapid development not only for day 1 but also for day 7 ,23 ,66,123 even at day 3333333. Now this was the second reason this app is not run of the mill WordPress project with custom plugin. This is rather proper Laravel + AngularJS project. Now you might say that hey since you are using Php which powers both WordPress and Laravel, in fact WordPress has so many plugins that things which took me days or even weeks to sort things even, would require measly WordPress plugin install. Well true but I personally find coding standards and guidelines to my personal dante. Thing is I rather than choose Laravel + AngularJS over WordPress + jQuery , have you seen how people code in jQuery , all they basically use is custom selectors and along with other tools which basically remind me of Swiss Knife Like this
Please have a look at this, now if you look clearly it mostly have knifes wondering if you will have those moment oh dear I like this knife why I don’t have another identical 23 knives.
I am not against jQuery it is just that I am against code they write. jQuery is good library but that’s it. It’s built for something else, and it’s good about it.
>API-driven development
Well now of course API ‘s allow creation of mobile devices. But I think they do one job which almost no one developer discusses. They allow thoroughly testing of your application. In conventional website output is basically Html tags, CSS rules, JS code along with processed back end logic(content and behavior). You can’t test check it from end user point of view unless you check each feature manually(Though you could still unit test code ). But if you have your back end wired with front end , then you can test your API hell you can even break it apart and run tests on each one case and scenario using POSTMAN(so does Laravel!). Though I think that this can be done in vanilla JavaScript it is just that SPA almost forces you(in a good way)
Now once it was decided that we need we had SPA next was choosing of either Ember.js or Angular.js ,even though latter has backing of Google , we initially went ahead with ember.js since I knew at least 3 big scale applications running on ember(not that Angular doesn’t).
In fact they have full website dedicated showcasing apps built with ember builtwithember.io/
Also I found out that initial steps for Angular to be quite difficult than that of Ember there were factories , services and what not, so we started with Ember. In fact for first few demos our application was based on Ember , but on one Saturday with having Sunday in my bag, I decided to give it one more try. And Voila suddenly all things in angular were making proper sense, only then I fathom notion that Angular is actually given proper thought (though I would still say that for head start Ember is way ahead of it). Factories, services and directives suddenly made sense , Like a hard working detective who spent all week trying to figure case out and in an instant all made sense. I just had eureka moment.
With dependence injection(savior) , proper separation of concern in coding and following Angular guidelines(although I still hate the idea of custom directives, am I the only one?) we were not only increasing the pace of commits in our code base but also changing code was not at difficult , angular shows you error in console which on clicking directs to page detailing your error(which is more or less hit and miss ). One last advantage which Angular gave me over Ember was availability of custom modules. Since our whole application is SPA with not actual redirects and using AJAX only, we realized that on slow connections end user must have some kind of feedback. Just like loading bar on top YouTube , we could find one at github and incorporating it was easiest , something that we could have coded it ourselves that was already there.
With angular it is difficult to write spaghetti code, in jQuery you can(and you will) mix you server logic with custom css styling code( I am not saying that jQuery is bad , nope I am not.). Everything has its own place. Want to connect to backend service for sending and retiveing data, simple create a factory method and pass dependency in controller ,then call the method in controller along with success and failure callbacks. Now in real world without using SPA framework when you may have to change the client after 2-3 months and you do all the changes with eyes closing and hoping it just works! , well hope has very little meaning for us developers.
Anyways that’s pretty much from EvilDevelopers . See you next time.