Replacing angular with standard web technologies

Question

I'm working on a project which has the luxury of using ECMA 6 on the latest browsers for a product that will be shipped in 1.5 years. So we thought why not use Web Components now that Angular 2 isn't available (which is going to be ECMA 6). And while we are at it, can we replace Angular altogether without having to go back to stone age?

How to replace Angular?

There's this site called youmightnotneedjquery.com which is basically about how modern browsers actually have most of the stuff that jQuery was traditionally used for. I'm interested to see something like that for Angular.

We mainly use four Angular features. What are my options for replacing them?

• Angular Directives --> Web Components
• Angular Modules --> ECMA 6 Modules (not exactly the same thing)
• Angular Routes --> ???
• Angular 2-way databinding --> ???

PS. We don't want to replace Angular with something similar like Backbone or Ember. We want to replace it with standard web technologies but if we have to use small tools to fill the gap, we'll consider it.

Answer 1

I've been researching in the past 3 weeks and turns out many people are thinking about an alternative after Angular took a drastic change path. Fortunately the upcomming W3C Web Components standard actually has all we need and it works right now with polyfills from the Polymer project. So to answer the question:

• Angular Directives --> Web Components use the polyfill until all browsers support it.
• Angular Modules --> ECMA 6 Modules part of the problem is solved with HTML imports. But you can also use Traceur until the browsers support it.
• Angular Routes --> There's a component for that™ use <app-router>.
• Angular 2-way databinding --> Polymer adds a "magic" layer on top of the plain standard web components. This includes many features including data-binding.

+Plus More

If you're wondering about the build process for concatenating files in order to reduce the number of HTTP requests, take a look at Addy Osmani's post about Vulcanize. Spoiler: you may not need it with the upcoming HTTP 2 optimizations.

Many Angular projects use Twitter Bootstrap for the layout. Polymer can do that plus it plays nicely with Google's Paper elements (totally optional but superbly awesome).

If you want to make yourself familiar with web components in general, here is a bunch of nice articles: http://webcomponents.org/articles/

And here is a wealth of web components: http://customelements.io/ I don't know if it's going to be a new NPM, but the list components is pretty impressive and growing.

It's relatively complicated to expose an API for an Angular component. People have come up with all sorts of methods from link function to emitting events. In Web Components, however, it's really easy to make your component interact with the world outside and indeed the API and events you expose aren't much different from standard HTML tags like <audio>.

Just like Angular, you can use Polymer with Dart as well.

Conclusion

Overall, I don't see any reason to use Angular except if:

1. You have a huge source code investment in angular and don't want to port everything to standard web. (Angular 2.0 will deprecate your code anyway, so you're stuck with Angular 1.*)
2. Your team is too lazy to learn a new technology (in that case web might not be the right platform for this attitude anyway).

Angular was good for what it was doing and had its own Hype cycle. Web components solve many of the issues Angular was trying to address. Probably Angular had a role as a proof of concept for the Web components. But now it's time to move on. Web is reinventing itself everyday and it's inevitable to moves someone's cheese.

I'm not saying that Polymer is the ultimate answer to everything. At best it's another Angular which will render useless in a couple of years, but now it's a good time to learn and use it. The W3C standards don't die easily though, and Polymer tends to be much closer to them.

There's an element for that™ is the new There's an app for that™

Answer 2

TLDR: seriously consider writing an almost Angular 2.0-compatable Angular 1.3 app before rolling your own framework

It seems as if you've identified that Angular does a lot of things the right way and that's why you're attempting to replicate it, so basically you're going to roll your own by combining a hodgepodge of libraries. Unless you have an enormous investment of Engineering hours, the framework you build will likely be:

• Lightly documented
• A cross-browser maintenance nightmare and (worst of all)
• Difficult for new hires to learn

If there wasn't a framework out there that did what you want to do already, I think rolling your own makes sense, but by trying to recreate Angular you're:

• Taking on a lot of Engineering work that has already been done by a dedicated team, that could have been spent on building product
• Made it MUCH more difficult to onboard new employees because you have to:
  • Find candidates that are willing to use a home-grown framework instead of growing their skills at an open source framework they could use elsewhere
  • Train these employees to use your framework (and good luck unless your documentation is mature)

I know your question asks how to replace Angular, but I've seen too many companies go the route of rolling their own and paying for it down the road. Again, if your budget includes a ton of core resources to build out (and document, and maintain) the framework and you don't think there is any chance corners will get cut when push comes to shove later if timelines get tight, then rolling your own might make sense. However, I think you should seriously consider reading up on how to write Angular 1.3 apps so that they're easy to port to Angular 2.0 and go the Angular route. Just look at the size of the community you're missing out on:
http://www.airpair.com/js/javascript-framework-comparison