Better, Faster, Stronger with Angular.js

Oh, and more flexible too...

Posted 2 years ago by Tom Maiaroto.


So I recently gave hosting some static content on Amazon S3 a whirl. I wanted to ensure that, in the event of massive traffic, the site (along with my other sites) didn't go down. I also wanted to host it for as cheap as possible. I'm still waiting to see the next bill to check if my quick math was accurate.

The site was just HTML, CSS, and JavaScript. A "static" site...But what does that mean? Now that I've been diving in with Angular.js, I've realized a new world of possibilities and the idea of "static" isn't so static afterall. An application with Angular.js can be hosted on and served from S3.

With the CORS feature which was recently added to S3, I think there's a lot of potential. I love designing web hosting architecture. It changes based on how the application works, but caching always remains a big challenge. That's why there is a plethora of options. So having S3 another option is exciting. One can practically offload most of the traffic to their web server by cleverly using Angular.js and S3. Many sites have more reads than writes, so if you were to cache JSON files on S3, voila - zero traffic back to your web server to hit up a database.

Even still, if the web server was just responsible for a RESTful application, you really shouldn't need a large web server. I think a lot of energy is wasted in serving up web pages...Worse yet, web pages rendered through a server side scripting language like PHP or Python, etc.

Then after spending all your time with these templates, whether you had some clever helper methods in there or got all crazy with Twig, Mustache or god forbid Smarty...After all that, guess what? A few words to job your memory: portability, maintenance, testing, cross-platform. Starting to ring a bell? You just committed to a system that you don't know will be around for all that long and that never really was a good fit in the first place. All of these systems from stand alone template systems to those found in your typical CMS like WordPress...They just don't work folks. All that time spent in maintenance and training employees, etc. Such a waste and as a bonus, guess what? Your favorite template engine may cease to exist one day. So now your left to maintain it. With Angular.js, it's just JavaScript and JavaScript is JavaScript. It's not some new language or special syntax to learn and it's not going anywhere anytime soon.

I like Angular.js because of how easy it makes things and how it divides your front-end in half. You have a declarative language going on with your templates and then a half step between front-end and back-end for the JavaScript code. So that makes three sides to this instead of just two...Where those two would be mingled together in a very horrific way that we all simply got used to. Trust me on this one, it makes it a lot easier to divide up the work load and find employees who can truly stay within their roles. Not that I don't think a web designer should know a little bit about programming...But the reason why we put in those crazy hours as web designers and developers is not just enthusiasm...It's because we're doing more than one job.

So that's kinda the faster and better part. It's faster and better to use Angular.js as the person doing the work. Then you have the faster part in the fact that people's web browsers will cache things. Since they aren't reloading all of that JavaScript on each page (thanks to deep linking) the site/app will load a lot faster.

The stronger part is that Angular.js also allows you to have test cases. Crazy, I know! So on top of whatever QA process you do, Selenium tests, etc. you also have testing with Angular.js. The other thing that makes it stronger is now you're taking a dynamic thing and making it more static. That makes a site stronger in terms of handling traffic. Here we go back to S3. There's no reason why your Angular.js templates (and all of it really) can't be hosted on a CDN like S3. The CSS and HTML as well for that matter. Build in cases for when your REST service is down and cache what can be cached and you will end up with a site that will virtually never crash. So even if your web server that draws from a database and handles authentication, etc. is down, you still could be showing your users something. The average user may not even know there's a problem. This will give you time to bring on more servers, restart something, fix something, etc. You'll also never have to worry about a user seeing an ugly server error message. Not just your commonly decorate 404's, but you know those 501's and 505's that we all love and like to forget about.

There's a few other interesting things now that your templates can come from anywhere. Remember, traditionally, they couldn't because they were tied together with back-end server-side code. Now that they are truly isolated...Think about this for a second, "fork this site." If I tied in GitHub authentication here and allowed you to link your fork of my site (the front-end template portions), you could easily change the design of my site and everyone could then use that design. Maybe a silly example, but think about it for a CMS. Installing themes for WordPress, Drupal, etc. is terrible. You upload some zip file through the interface that's supposed to make it easy (or FTP it all to the proper places) and pray it works out. Remember, it's not exactly like these themes are testable with test cases. So you or, worse yet, your visitors will stumble upon the problems at some point sooner or later if they are there. Then if you want to modify that theme...Oh man, now you have to again pick out all the HTML between the PHP code (in this case) and you need to learn the anatomy of a WordPress theme. I mean, fair enough, these template systems were devised in an age when there really wasn't much better. However, now we do have something better. Faster. Stronger. Oh and more flexible. You will have a many more options for your application and hosting architecture as well as how you divide up the work to build the site or application if you're working on something large with a team.


Filed under
comments powered by Disqus

Search for Posts

Popular Labels

social media virality score general internet web development reviews and opinions php web tools hosting lithium web design

Recent Posts