Related
We are looking at options to build the front end of an application we are creating and are trying to evaluate a tool that will work for us and give us the best platform to move forward.
This is a Node.js project. Our initial plan was to use Express and go down that route, but we decided that before we kick off this stage it might be best to review what is out there. Our application has several areas which we don't believe fit the single-page model in that they are related from an application perspective, but not from a view one.
We have seen a few of the frameworks we could use to build out the client like Backbone.js, Meteor, etc. and also AngularJS.
This may be a fairly obvious question, but we cannot seem to decipher if AngularJS is purely for single-page application or it can be used for multi-page applications like Express for instance.
UPDATE 17 July 2013
Just to keep people in the loop, I will be updating this question as we go through the process. We are going to build everything together for now, and we will see how well that performs. We have reached out to a few people who are more qualified with AngularJS than us and posed the question regarding splitting up larger applications that share context, but may be too large working on a single page.
The consensus was that we could serve multiple static pages and create AngularJS applications that work with only those pages, effectively creating a collection of SPA and linking those applications together using standard linking. Now our use case is very specific as our solution has several applications, and as I said we are going to try the single code base first and optimise from there.
UPDATE 18 June 2016 The project fell of a cliff, so we never got round to getting too much done. We have picked it up again recently, but are no longer using angular and are using React instead. We are still using the architecture outlined in the previous update, where we use express and self contain apps, so for example, we have a /chat route in express that serves up our React chat app, we have another route /projects that serves up the projects app and so on. The way we are kinda looking at it is each app is an aggregate root in terms of its feature set, it needs to be able to standalone for it to be considered an app in itself. Technically, all the information is out there, its just basic express and whatever flavour of client side app building goodness you want to use.
Not at all. You can use Angular to build a variety of apps. Client-side routing is just a small piece of that.
You have a large list of features that will benefit you outside of client-side routing:
two-way binding
templating
currency formatting
pluralization
reusable controls
RESTful api handling
AJAX handling
modularization
dependency injection
It's crazy to think that all of that "could only be used in a single page app". Of course not.. that's like saying "Jquery is only for projects with animations".
If it fits your project, use it.
I struggled with the "how" at first with Angular as well. Then one day it dawned on me: "It is STILL javascript". There are a bunch of examples on the ins-and-outs of Angular (one of my favorites along with the book https://github.com/angular-app/angular-app). The biggest thing to remember is to load in the js files just like you would in any other project. All you have to do is make sure the different pages reference the correct Angular object (controller, view, etc.) and you are off and running. I hope this makes sense, but the answer was so simple I overlooked it.
Maybe my experience will be useful to someone. We split our project logically. One SPA we use for feed, another one to work with the map, another one for editing a user profile and etc. For example we have three apps: feed, user and map. I use it in the separated urls, like this:
https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/
Each of these applications has it's own local routing mappings between states in the application.
I think it is a good practice because each application work only with its own context and load dependencies that it really need. Also, it's practice very good for debug and integration processes.
Indeed, you can very easily make a mix of SPA apps, for example the feed will be url with the angularjs application, the user app with the reactjs and map to the backbone.js application.
In response to your question:
Angular not just for SPAs, Angular play good and fast for SPA applications, but no one bothers to build MPA application of a variety of SPA applications. But thinking about your url architecture don`t forget about SEO availability of your applications.
I also support the idea:
What’s the difference between a project and an app? An app is a Web
application that does something – e.g., a Weblog system, a database of
public records or a simple poll app. A project is a collection of
configuration and apps for a particular website. A project can contain
multiple apps. An app can be in multiple projects.
If all you need is a few pages with client databinding, I'd go with Knockout and Javascript Namespacing.
Knockout is great, especially if you need uncomplicated backward compatibility and have fairly straight forward pages. If you're using 3rd party components, Knockout's custom bindings are straightforward and easy to work with.
Javascript namespacing allows you to keep your code separate and manageable.
var myCo = myCo || {};
myCo.page = {
init: function(){ ... },
...
}
And in a script tag after your other scripts are loaded
<script>
myCo.init();
</script>
The key is, you use whatever tool you want for when you need it. Need databinding? Knockout (or whatever you like). Need routing? sammy.js (or whatever you like).
Client code can be as simple or complicated as you want it. I tried integrating Angular into a very complicated site with an existing proprietary framework, and it was a nightmare. Angular is great if you're starting fresh, but it has a learning curve and locks you into a very tight workflow. If you don't follow it, your code can get really tangled really fast.
I'd say Angular is overkill if you're just looking to develop a SPA. Sure, if you're already comfortable developing with it, go ahead. But if you're new to the framework and only need to develop a SPA, I'd go with something more simple with a number of its own perks. I recommend looking into Vue.js or Aurelia.io.
Vue.js uses two-way data binding, MVVM, reusable components, simple and quick to pickup, less code to write, etc. It combines some of the best features of Angular and React.
Aurelia.io, in all honesty, I don't know much about. But I've peeked around and it seems an alternative worth looking into, similar to the above.
Links:
https://vuejs.org/
http://aurelia.io/
Facebook React can use a unidirectional data flow pattern called Flux to give structure to applications by using Views, Actions, Stores and a Dispatcher.
I have found the following Flux libraries for Angular:
ng-flux: https://github.com/JustinWinthers/ng-flux
angular-flux: https://github.com/brentvatne/angular-flux
song-flux: https://github.com/gah-boh/song-flux
And this sample: http://victorsavkin.com/post/99998937651/building-angular-apps-using-flux-architecture
Are any of these production ready?
Which ones have plans to migrate to Angular2 and integrate with the Component Router?
I can't seem to find any large application samples using any of these libraries. Additional links would be useful.
I authored ng-flux and I wouldn't say it's production ready since I haven't had the time to test it in a variety of projects. However I am using it in a fairly large enterprise class application currently. I agree that flux-angular has a good team around it and I'd recommend their library. Regardless, flux is simply a pattern that you can incorporate on your own. The issue with any Angular 1.x based approach is always the way Angular manages digest cycles and you have to sometimes jump through hoops for views to update in the background if you process data outside of the Angular namespace. In ng-flux I force a digest cycle if one hasn't occurred.
Flux as a pattern works well to me because it makes debugging and code separation much easier on larger projects, so my goal was to use this pattern on a project that already had substantial legacy Angular code and decrease the time it was taking to triage errors. It's an actuarial application with lots of calculations, so finding small data discrepancies fast was necessary. Writing ng-flux achieved this for me.
Regarding Angular 2, I think it will be easy enough to incorporate Facebook's dispatcher in your project and allow it to manage data flow. I think once Angular 2 is ready, based on what I've read so far it should be easier to use third party JS libraries - especially since Angular 2 will follow more of a web component based architecture somewhat similar to React. I've even seen promises that it will be easier (or more organic) to use third party routers, etc.... If this holds true, I doubt you'll actually need a library to manage a flux based data architecture in your Angular 2 apps. It should be fairly seamless to simply use something like the Facebook Dispatcher as a singleton (properly namespaced) object in your app that you can reference in your Angular components. I think most of the library authors out there realize this - it's more a problem for Angular 1.x apps to use this pattern than it will/should be for Angular 2 apps.
https://github.com/facebook/flux/blob/master/src/Dispatcher.js
I am not a pro in ReactJS, however I am not sure that integrating Flux with AngularJS is really a focal point for many Angular developers. With the release of 2.0, the Angular teams is continuing to make the framework more and more self-sufficient so people do not have to jumble together different libraries, but instead can just rely Angular to accomplish the task at hand.
That said, it seems like this flux-angular libary is stable with versions' 1.x, and it seems like it has pretty good support. I know it does not help your case when dealing with 2.0, however, it does seem like a solid enough API; but, then again, maybe I am just biased because of the functionality I have been able to replicate using Angular 1.2 & 1.3 :)
The question is in regard to AngularJS, BackboneJS, EmberJS and the other frameworks.
I have to translate a project from php to javascript and I have to decide, if I am going to use:
AngularJS
Polymer
A combination of them
I prefer using Polymer, because I like it.
Yet, I am missing (and correct me where I am wrong) the ability to make:
Views and link between them (like in Angualar)
Controllers
I know that the structure is up to me, on how to build my application, but it seems that angularjs has a well predefined structure for building mvc-applications.
Therefore I want to know: Is Polymer a substitute for Angular, if you want to build a well structured web application or is Polymer complementary library to be used along other existing frameworks?
EDIT 21.09.2014
No one really answered the question to my fullest satisfaction, therefore I marked it as not answered yet. Many say it just "DEPENDS". But no one is able to elaborate, on what exactly it depends.
On the complexity of the application? On the needs of the application? For what needs does Polymer fit and for which doesn't it fit? These are the answers I was looking for.
Some say it can be used as a frontend framework. Others say that is just a library and others say "Yes and No". Unfortunately rather confusing answers.
I wish there was an official answer to this, but I let you in on what my feeling is. I believe it is a substitute, but Polymer hasn't yet reached the structure, that other frameworks require to work. Maybe this is intentional, maybe it is just a matter of unreached maturity, because the framework is new.
I hope that the creators will explain, when it is best to use AngularJS and when should someone use Polymer for building large scalable web applications.
EDIT 15.08.2015
Polymer 1.0 is out. And it turns out Polymer is officially NOT a framework and is supposed to work in a complentary way with other frontend frameworks.
https://youtu.be/fD2As5RmM8Q?t=6m42s
IMHO both are two different things and they both are to serve two different purposes. Though they have some common features to offer, data-binding can be one of them.
Polymer
If you truly want to use the Awesome Webcomponents, Polymer is one way to achieve that. There are other options like you can go with your vanilla JS, or use other libraries like X-Tag from Mozilla or Bosonic. These libraries polyfill the webcomponent features which are still in drafted state. So, these libs help us have/provide the same user experience across browsers even where there is no native support for the webcomponents.
Angular
This is a full fledged MVC framework. And people here know what Angular as an MVC framework includes/provides.
That all said to answer your question
Google's Polymer is not exactly a fully functioning Frontend Framework and can be used as a Subsitute OR Complement to other Frontend Frameworks. It can be used as a substitution for the V part in Angular as MVC. Like people use React as V in different frameworks. It is not much a different case for me. Being more specific in case of Angular, Polymer is like directives in Angular 1.x while like components in upcoming Angular 2.x.
References
To be more sure of what I am talking about and for additional sources on how to use the Polymer with Angular2 (Angular2 not released to this date)
you can check this video at "https://youtu.be/7WgEuNZCCHk?t=32m15s" starting from time 32:15 where Rob explains how to use the generic webcomponents/polymer as the components/View in the Angular2.
you can check this project "https://github.com/rkirov/youtube-app" which uses Angular2 and google-youtube web component.
https://github.com/ebidel/polymer-experiments/tree/master/polymer-and-angular/together
From the polymer-starter-kit
Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!
So, in my view these two projects are not competing each other.
Webcomponent Specs
The webcomponent specs are here for one's reference
Custom Elements - http://w3c.github.io/webcomponents/spec/custom/
HTML Imports - http://w3c.github.io/webcomponents/spec/imports/
Shadow DOM - http://w3c.github.io/webcomponents/spec/shadow/
I just wish the webcomponents are native to the evergreen browsers ASAP.
From the Polymer Starter Kit:
"Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!"
Update:
What was described as Carbon Elements seems to fall under:
Polymer(version 2) App Toolbox
Component-based architecture using Polymer and web components.
Responsive design using the app layout components.
Modular routing using the elements.
Localization with <app-localize-behavior>.
Turnkey support for local storage with app storage elements.
Offline caching as a progressive enhancement, using service workers.
Build tooling to support serving your app multiple ways: unbundled for delivery over HTTP/2 with server push, and bundled for delivery over HTTP/1.
Carbon Elements adding framework features
During The Polymer Summit 2015 Keynote, Google announced a new "Polymer idiomatic and framework oriented" set of elements, tentatively named the Carbon elements.
Some quotes from the longer tjsavage answer regarding Angular 2 vs Polymer Carbon:
"The trick is in thinking about the web platform as an application framework... Polymer the library is to the web components component model as the carbon elements will be to using the web platform itself as an application framework: the opinionated rails to make it easier to understand and achieve."
"Angular 2 will provide one way of structuring your application that uses Angular's view of what makes a good application structure. The carbon elements will provide a different way of structuring your application that more directly uses what the web platform itself provides as its structural underpinning."
Polymer is almost fully functional.
Currently it is missing routing for example but this doesn't mean you can't do this with Polymer.
There is now https://elements.polymer-project.org/elements/app-route
In Dart also dependency injection works fine with Polymer because of the types. If it's possible in Dart, it's possible in JS as well because Dart transpiles to JS. DI in plain JS might be more cumbersome though.
In this package (Dart)
https://github.com/bwu-dart/bwu_polymer_routing
I made the routing and DI packages used by Angular.dart available for Polymer. There are also routing packages for Polymer.js available.
I put together some router demos. The "missing parts" really depend on what type of application you're building.
https://github.com/erikringsmuth/polymer-router-demos
I've used it as both, as an enhancement to an app written in another framework, and as the full framework itself, where it was responsible for every element on the page.
I really like just about everything about Polymer, so I've been very happy using it for the whole app, even built my own router. If you've got an existing app I'd recommend dipping your toe in the water, as Polymer works great composed into other apps to see if it's to your liking.
Let me give this another try:
The key behind web-components (and thus Polymer) is, that they are self-contained. You have a web-component somewhere, you import it, and (if you're lucky) it just works, wherever it comes from. The web-component will NOT interfere other components. So doing things like MVC is not Polymers business (although it provides a data-binding mechanism), as this belongs to the process of tying things together. It is considered to be best practice that these kind of things are solved by creating new elements too, that create and react to events. When it comes to the model you code non-visual web-components, that don't have/need a template. TodoMVC has an (outdated) example for that (https://github.com/tastejs/todomvc/tree/gh-pages/examples/polymer).
So Angular gives you a path to follow on how to do MVVM, whereas it is up to you on how to do the "logic" in your app when using Polymer. IMHO Angular is for more complex and rather enclosed apps, whereas Polymer is for any kind of app, that embraces the web. You even can use Polymer, if you're not writing an app at all ;)
We are looking at options to build the front end of an application we are creating and are trying to evaluate a tool that will work for us and give us the best platform to move forward.
This is a Node.js project. Our initial plan was to use Express and go down that route, but we decided that before we kick off this stage it might be best to review what is out there. Our application has several areas which we don't believe fit the single-page model in that they are related from an application perspective, but not from a view one.
We have seen a few of the frameworks we could use to build out the client like Backbone.js, Meteor, etc. and also AngularJS.
This may be a fairly obvious question, but we cannot seem to decipher if AngularJS is purely for single-page application or it can be used for multi-page applications like Express for instance.
UPDATE 17 July 2013
Just to keep people in the loop, I will be updating this question as we go through the process. We are going to build everything together for now, and we will see how well that performs. We have reached out to a few people who are more qualified with AngularJS than us and posed the question regarding splitting up larger applications that share context, but may be too large working on a single page.
The consensus was that we could serve multiple static pages and create AngularJS applications that work with only those pages, effectively creating a collection of SPA and linking those applications together using standard linking. Now our use case is very specific as our solution has several applications, and as I said we are going to try the single code base first and optimise from there.
UPDATE 18 June 2016 The project fell of a cliff, so we never got round to getting too much done. We have picked it up again recently, but are no longer using angular and are using React instead. We are still using the architecture outlined in the previous update, where we use express and self contain apps, so for example, we have a /chat route in express that serves up our React chat app, we have another route /projects that serves up the projects app and so on. The way we are kinda looking at it is each app is an aggregate root in terms of its feature set, it needs to be able to standalone for it to be considered an app in itself. Technically, all the information is out there, its just basic express and whatever flavour of client side app building goodness you want to use.
Not at all. You can use Angular to build a variety of apps. Client-side routing is just a small piece of that.
You have a large list of features that will benefit you outside of client-side routing:
two-way binding
templating
currency formatting
pluralization
reusable controls
RESTful api handling
AJAX handling
modularization
dependency injection
It's crazy to think that all of that "could only be used in a single page app". Of course not.. that's like saying "Jquery is only for projects with animations".
If it fits your project, use it.
I struggled with the "how" at first with Angular as well. Then one day it dawned on me: "It is STILL javascript". There are a bunch of examples on the ins-and-outs of Angular (one of my favorites along with the book https://github.com/angular-app/angular-app). The biggest thing to remember is to load in the js files just like you would in any other project. All you have to do is make sure the different pages reference the correct Angular object (controller, view, etc.) and you are off and running. I hope this makes sense, but the answer was so simple I overlooked it.
Maybe my experience will be useful to someone. We split our project logically. One SPA we use for feed, another one to work with the map, another one for editing a user profile and etc. For example we have three apps: feed, user and map. I use it in the separated urls, like this:
https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/
Each of these applications has it's own local routing mappings between states in the application.
I think it is a good practice because each application work only with its own context and load dependencies that it really need. Also, it's practice very good for debug and integration processes.
Indeed, you can very easily make a mix of SPA apps, for example the feed will be url with the angularjs application, the user app with the reactjs and map to the backbone.js application.
In response to your question:
Angular not just for SPAs, Angular play good and fast for SPA applications, but no one bothers to build MPA application of a variety of SPA applications. But thinking about your url architecture don`t forget about SEO availability of your applications.
I also support the idea:
What’s the difference between a project and an app? An app is a Web
application that does something – e.g., a Weblog system, a database of
public records or a simple poll app. A project is a collection of
configuration and apps for a particular website. A project can contain
multiple apps. An app can be in multiple projects.
If all you need is a few pages with client databinding, I'd go with Knockout and Javascript Namespacing.
Knockout is great, especially if you need uncomplicated backward compatibility and have fairly straight forward pages. If you're using 3rd party components, Knockout's custom bindings are straightforward and easy to work with.
Javascript namespacing allows you to keep your code separate and manageable.
var myCo = myCo || {};
myCo.page = {
init: function(){ ... },
...
}
And in a script tag after your other scripts are loaded
<script>
myCo.init();
</script>
The key is, you use whatever tool you want for when you need it. Need databinding? Knockout (or whatever you like). Need routing? sammy.js (or whatever you like).
Client code can be as simple or complicated as you want it. I tried integrating Angular into a very complicated site with an existing proprietary framework, and it was a nightmare. Angular is great if you're starting fresh, but it has a learning curve and locks you into a very tight workflow. If you don't follow it, your code can get really tangled really fast.
I'd say Angular is overkill if you're just looking to develop a SPA. Sure, if you're already comfortable developing with it, go ahead. But if you're new to the framework and only need to develop a SPA, I'd go with something more simple with a number of its own perks. I recommend looking into Vue.js or Aurelia.io.
Vue.js uses two-way data binding, MVVM, reusable components, simple and quick to pickup, less code to write, etc. It combines some of the best features of Angular and React.
Aurelia.io, in all honesty, I don't know much about. But I've peeked around and it seems an alternative worth looking into, similar to the above.
Links:
https://vuejs.org/
http://aurelia.io/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I'm building a large scale web application. It will grow in the future so I need a good back-end and front-end architecture for my application. at the back of the site, I use Zend Framework so the architecture is OK for me. But at the front, working with javascript and ajax without having a good architecture makes later changes hard and confusing.
For now, I'm using my own architecture. I have a big object for the whole application say BigObject. I extend it when modules are added to the site. say I have an upload module. I use this:
BigObject.upload={
//initialization
init:function(){
},
//I tried to use what I named semi-MVC architecture!!!
controllers:{
//index is a controller
someController:{
init:function(){
//initialization
},
someAction:function(){
//Code goes here
//call a model if necessary
//call view script
BigObject.upload.views.someController.someAction();
}
}
},
models:{
//models required for this module like loading contents with ajax.
loadContent:function(part,callback){
}
}
views:{
init:function(){
//initialize view
},
someController:{
someAction:function(){
}
}
}
}
What do you think? Is there any better solution to this problem? anyone thought about a good structure for front-end part of web applications ( like what we have at back-end,good file structure and object-oriented methods )?
The most up to date answer to this question in 2020, would be to use React + GraphQL + Styled-Components. The best place to start with React is the official Create React App tool. Their are a few different implementations of GraphQL; on the client side the clear leader is Apollo. On the server you have a lot more choice and it is reasonably easy to even roll your own server implementation, so go with what work best with your current backend. Styled-Components gives you CSS in JS, in the same way that React gives you HTML in JS.
For a more complete and opinionated experience, take a look at Gatsby, which brings all of the above into a single framework.
Over the last couple of years a more functional style to writing JavaScript has become popular. If your not used to functional programming then it can be a bit of a steep learning curve to start with, but start by leaning about a library called Ramda.
Here are few links to get you started on functional JS
An introduction to functional programming in JavaScript
Thinking in Ramda
Indentation is the enemy: Writing less complex JavaScript
Mostly Adéquate guide to functional programming
When it comes to testing, then Jest combined with Enzyme is by far the best current option.
Finally for a much deeper answer, checkout this talk from Cheng Lou on the Spectrum of Abstraction.
Most of the answers are proposing stuff like jQuery, React, Angular, Vue.js... which are not frameworks, neither architectures. All of these libraries are layers on top of JavaScript. I just remind you that JavaScript is already a high level language!
Since the question is about a good client-side architecture and structure for large scale web applications, I would say that none of the previous answer solve the problem, and there is a reason for that :
There is currently no emerging or commonly accepted architecture for front-end JavaScript source code organization.
I already read dozen of blog posts, Stackoverflow questions, Youtube videos... I never found someone who detailed a generic, general and scalable architecture. The main reasons are:
front-end JS code is quite small regarding back-end source code, most of the developers do not need a scalable architecture.
execution is ephemeral, lifetime of JS is the same as web pages lifetime.
the problem for many developers is more about manipulating the DOM than structuring large JS code. This is why people answers are about libraries rather than frameworks.
I really expect that some day, someone will propose the first real JS architecture (like MVC for example). But in my opinion, this architecture will be more about event-callback than MVC. Before concluding, I'll suggest you the following ressources:
Imperative or procedural programming.
Functionnal programming (probably the best lead with modules)
Awesome videos of Fun Fun Function
JavaScript modules
To conclude, I'll strongly recommend to consider JS modules that have a great underestimated potential. This is not exactly an architecture, but:
JS modules organise your code
JS modules are scalable
maintanability is easy
JS module are reusable
Previous list isn't the main reasons why you need to organize your code?
Word to the wise!
A lot of people push for either Dojo or YUI for large applications. They are honest frameworks where most everything else you'll find is a library.
Personally, I tend to stick with jQuery. I create jQuery plugins or jQueryUI Widgets as needed. I've managed to push jQueryUI pretty far.
Everything falls in either $.fn.myPlugin or $.ui.myWidget. To me, this has the added benefit of pushing you to keep code very modular and portable (assuming you abide by jQuery/jQueryUI conventions).
$(element).myWidget({
color:'eggplant',
someValue:42
});
$.upload(args);
I was actually struggling with the same question for sometime.. after doing few large-scale projects, I thought of sharing my learnings as a reference architecture incase someone else finds it useful.
Have a look at http://boilerplatejs.org. It is not a library, but a framework that integrates some industry leading libraries with architectural patterns for large scale javascript development.
According to my understanding on the frontend i will ask you to use web-components that uses only HTML,CSS and JS.
No need to spend much time on understanding the other languages. If you take the latest UI frameworks or libraries like Angular, React they have built on web components.
You can customize your own components and use cases which you want to use in your project.When you are using frameworks it will take some time to load and follow up for few libs that are using.
JS you can use it any way you want. You can re-use these components in any number of projects once you have created.
Just look into webcomponents https://www.webcomponents.org/introduction you will get a clear idea. I hope this helps.
With the experience of scaling some of my content for million viewers in my application. But then I had to close the application for less profit and more stress in managing it (not the cost though, but the profit was not high enough to keep up motivation)
My architecture was:
Mithril.js.org library - Checkout mithril here for front-end
Twitter bootstrap front-end framework
Backend with "Laravel and started migrating some of the heavy write data to nodejs"
Redis as in-memory storage.
I was almost in a situation to move my storage to s3 before I shut down the app.
No jQuery - I kept my app jQuery-free ( I heard and read somewhere big app avoid jQuery, so without further investigation myself, I planned to remain jQuery-free as well, though I have no solid or bullet proof reason to avoid jquery)
I found mithril more interesting then react or angular, it was so easy to start and I was building while I was learning, it was damn easy and they claim, they are better than react, vue and angular in terms of size and performance.
My response would be to ask why you need this? I've worked on plenty of applications which make use of javascript, but one thing that I've learnt is that the best thing to do is to minimise javascript and most especially object orientated javascript to an absolute minimum. Web pages with large and complicated javascript tend to be slow, memory hungry and a pain to debug with all the browser variations.