History of SPA frameworks: AngularJS 1.x and nostalgia.
‘Member that time? Ooh, I ‘member. (South Park: Member berries.)
This happened a long time ago, almost 5 years ago…
I switched to Angular at 1.2 version, so please, Angular-experts, correct me if I am wrong. In text below: Angular === AngularJS 1.x.
Also, should we talk about AngularJS in the past?
Why we still like Angular 1.x? Do you remember?
AngularJS was easy to start.
Yes, it was very easy to start a new project. Just insert links to CDN, add
<html>, quickly read easy tutorial — and your new Angular app (tutorial app) is waiting for you. Official modules like ngAnimate and ngRouter quickly solved all your problems.
AngularJS Docs and Tutorial.
AngularJS had a very good documentation and the tutorial was amazing. After “Phonecat App” tutorial you perfectly understood what exactly was AngularJS and how to use it. And it was clearer than any “Tour of Heroes”. (Yes, Angular 2, I’m talking to you).
Angular was modular, even in the 1.x version.
Do you remember that time, when we used Browserify and Bower?
We didn’t have tools like Webpack for bundling. Yes, Grunt and Gulp existed at that time, but they’ve been used things like gulp-browserify. So, formally we used Browserify.
Oh, do you remember that time, when we used Bower?
ng.module was a very cool feature. You can just insert links to your scripts and they will be interpreted as modules of one application. It was very useful and innovative — Angular’s module system. As opposite to jQuery’s
$.fn.myNewAwesomePluginForJQueryThatNobodyDownloads AngularJS provides you to write your own modules and use them as plugins or parts of your app. Also, it was very useful for lazy-loading.
Think Angular, not jQuery.
I still remember that time when almost in every article I found this phrase. Many developers switched to Angular from jQuery and “Thinking Angular” was a problem. I don’t want to remember that jQuery-time, when every project’s dependency was jQuery and first association with spaghetti was your code, but not your dinner.
Two-way data-binding — was a “killer feature” or just a “killer”?
ng-model — directive that connects your object from
$scope to DOM element — was a killer feature and a killer at the same time:
- You can implement two-way data-binding easily — Killer feature.
- Developers with small experience in Angular bound every variable to controller’s
$scopeand after that asked: “Why my app is so slow?” — Killer.
One-way data-binding was introduced in the 1.2 version, but I’m sure not all developers knew about it.
jqLite — mini-jQuery inside your framework.
jqLite is a tiny, API-compatible subset of jQuery that allows AngularJS to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.Directives and component-based paradigm.
So, you don’t need to include full jQuery build. Think Angular! jqLite provides all that you need. But, wait… Do you really need it?
Separating DOM manipulations into a small library that can be accessed only through
angular.element. Was it a step to the new level of abstraction? Maybe.
First component-based paradigm.
First attempt to implement component-based paradigm was in Angular. But as opposite to React, Angular was “JS in HTML”, not “HTML in JS”. Even Angular’s title declares it:
“AngularJS — HTML enhanced for web apps!”
Why “JS in HTML”? Because of directives like
ng-class in your application’s
Directives were the first attempt to separate commonly used components in small modules. And it fails, because of React-like components implemented in Angular 1.5. Maybe, React won because one day your
file-name.html could became:
All you need is… Angular’s core.
There is no need to reinvent the wheel when you already have all directives what you need. From my own experience, some developers didn’t create directives at all. They just used built-in directives of Angular, like mentioned above
ng-for. I even know some projects that were written without any custom directives. Note: it’s not a good practice.
One very interesting thing in AngularJS —it’s dependency injection. Have you ever seen it elsewhere in JS before AngularJS? Personally, I haven’t.
Uncovered topics. Angular is huge.
There isn’t any sense to consider every Angular topic:
- Services, factories, providers in AngularJS.
- “How to minify Angular app?”
- “How $scope.$watch works?”
- “How Angular works at all?”
- Built-in $http, ordering, filters and
- What was the biggest problem with Angular?
It’s so big that you can conduct an academic study about Angular.
So why we switched from AngularJS?
- Not so good performance out-of-box.
- Some AngularJS features you could never use at all, a lot of code was unused. Lite version of Angular solved it.
- AngularJS relied on browser DOM, not on VirtualDOM.
- Low-level of abstraction, AngularJS relied on HTML markup.
- It’s hard to be an expert in AngularJS, Angular is huge.
- Finally — modern Web requires new Thinking.
What AngularJS made for the Web?
It’s simple and complicated question at the same time.
JS === Power
Community, experts, ecosystem
Good framework => More developers.
More developers => Bigger community.
Bigger community => More components, tools, tutorials.
More tools and practice => More experts.
More experts => More new ideas, frameworks.
Vue, Aurelia, Angular 2/3/4
All these frameworks were inspired by AngularJS. Aurelia is a fork of Angular. Angular 2+ is a “continuation” of AngularJS. Some developers call Vue as a new AngularJS because of
v-on and other directives.
Do you remember that time?
SPAs is a real-life routine, that we build, design and use every day, but let’s imagine how cool it was 4 or even 5 years ago. But
new Web === new Challenge.
So, do you still remember how to “Think Angular”?
Also, did you remember that we consider the 1.x version?