Does it Really Have to be jQuery vs AngularJS?

“Awesome! I’m finally getting to be a crack-shot jQuery programmer… Huh, Angular? What’s that?”

I fully embrace the mindset, “do more with less code”. With that in mind, I figured it’s time I discovered what AngularJS is all about.

I could have done the myriad of online learning solutions; however, I prefer an in person connection where available. Luckily, I have that through Geekwise Academy. I used to teach their introductory course on HTML/CSS; so, when they offered a class on Angular, I knew this would be a chance to learn from someone who uses the technology everyday. Aaron Roberson was the teacher, and it was apparent that he knows his stuff. I got a clear view into how Angular and the MEAN (Mongo, Express, Angular, Node) stack  work.

Now the questions I’m asking myself are, “Do I replace everything with Angular, and the MEAN stack? Or what exactly do I begin using it for?”

Imperative & Declarative JavaScript

In short, imperative JavaScript is code that externally targets HTML markup and performs some operation on it. Declarative JavaScript is code that is declared directly in the HTML markup it operates on. Imperative maintains the separation between HTML and JavaScript code, while declarative mixes the two.

I find that semantic purists prefer imperative JavaScript while application developers are more concerned with creating a MVC (Model, View, Control) environment that behaves similar to other languages they use (i.e. C#, objective C, etc…).

As one who’s spent most of their web development time on sites for clients who need to be found on the internet; I tend to side with maintaining semantic, Search Engine Optimized (SEO) content.

Should I Move From jQuery to Angular?

In order to learn Angular, I’ve been attempting to use it as the framework for my new site. I had been loading it from a CDN, and on one particular occasion it failed to load. I noticed that without Angular loading, all of my searchable content only displayed as something like “{{content.article}}”, the object that contained the article. This got me thinking, “Do search engines execute javaScript before indexing content?”

Google searching this question brought up many conflicting answers. The answer I finally settled on was “Maybe, but not reliably” Angular is Google’s baby; so, of course Google is making progress towards indexing JavaScript created content; however, it’s not perfect. There aren’t any standards as to what variables or functions should be called, or how they should work. The idea of indexing JavaScript executed content opens many new doors in SEO trickery. It’s not as strait forward as it might seem.

In addition, many clients I’ve worked with have other search engines, or specialty search groups they want to rank high in. Some of these particular search technologies may not even have JavaScript executed content on their road-map.

There are some third party libraries available that are suppose to manage static versions of content for web crawlers, but that’s adding more complexity. The whole point is that I want to code less, and do more.

This is where I begin drawing the distinction between what is a “web-site”, and what is a “web-app”. I’ve decided that when building a web-site, I will stick with the dynamic duo of jQuery, and PHP. I define a website as being any web based project where SEO content is a top concern. When building a web-app, I will now begin using the MEAN stack. I define a web-app as being any web based content that requires a high level of user interaction and/or saving of user information, and SEO is not a concern.

How About Using Angular and jQuery Together?

Across the internet, whatever camp an author is in; I read that this is a bad idea. Stick with one or the other on any particular project. I agree with this; however, you will still see Angular used along side jQuery in some of my new web projects. To explain why, let me describe the development of my new site (coming January 2015).

The new site needs to have its pages properly indexed, as well as present the site as a single page application to the user. I want my website to look and feel like a single page web app, but due to a number of factors, the indexing of content is important to me. I’m able to accomplish this with jQuery and PHP.

Within my site; however, there will be a user login/management system for backers of future Kickstarter campaigns; Also, an area of the site will house the app I’m building for my IGD (Interactive Game Design) students. These two items do not need to be indexed. They have a specific use for a limited audience that will be told of it’s existence. There is no need for anyone to find these “app-ish” components of the website, therefore I’ll build them with the MEAN stack.

My one web project is essentially broken into three.

  1. The main website that is designed to look and feel like an app – Needs proper SEO – jQuery/PHP
  2. The User Login/Mangement for future backers – Does not need proper SEO – MEAN
  3. The IGD student app – Does not need proper SEO – MEAN

The MEAN components will not require jQuery/PHP. They’ll be built as their own reusable “modules” that are presented in a jQuery/PHP website.

Wrap Up

Angular and the MEAN stack overall seem like a great option for web-app development. Angular is worth learning not just because it’s all the rage, but because whatever replaces it will likely be a declarative MVC based framework. Learning Angular is a form of future proofing; however, for the time being if a web based project requires SEO, I’m sticking with the old staples. They aren’t going away anytime soon.

Leave a Reply