We got an app written in AngularJS but we have run into performance issues as the app tries to load a large amount of data from the server and lets the user play around with it (read a complex DOM). Surfing around and reading about it seems that two-way data binding, intrinsically called $watch expressions etc of AngularJS is posing a problem that we are unable to surmount. And then we have come across fb's ReactJS that promises fast view rendering.
This has set us wondering if ReactJS could be used with AngularJS to just take care of the 'view' part. Would be very grateful if anyone could provide some insight or direction regarding this?
Thanks
This tool (single-spa, a javascript framework for front-end microservices) allows you to use different libraries and frameworks combine. In this way, you can save your old business logic.
Have you tried ngReact? I haven't tried it myself but it seems to do what you want (using React components in Angular).
i'm playing with that now to combine angular directives with react, but for my app in pure angular on large data set, i used angulars for $compile and rendering and it works pretty fast, but data manipulation and whole building of this part of HTML is done by d3.js, maybe you can look on that lib...
Related
I have seen many articles regarding the changes in Angular2 . But I can't find much advantage in using Angular2. Can some one point out some new things that can be done using Angular2 which can't be done using the previous versions.
I know there are changes like $scope changed to this. I'm not asking for changes. I'm asking for new features that is in Angular2.
The TL;DR Version
Because ES6 is important to pick up, so no need for a custom dependency management system anymore. ES6 and Angular 1 together get ugly fast, as they together introduce a bajillion coding styles :(
Although the library is overall heavier, the architecture it uses (all component based) is a lot faster, lighter, and modular for a scalable application. See http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor
You receive (upcoming) Server Side Rendering, which enables fast initial load time and Search Engine Optimization (Yay!) See: https://github.com/angular/universal
You receive WebWorker friendliness, which makes your application able to "multi-task". See: https://github.com/angular/angular/blob/master/modules/angular2/docs/web_workers/web_workers.md
Shadow DOM is not fully inherited by Angular 2 yet, but I'm sure it will be. It has some support right now.
The whole concept of $scope is gone. You receive two way data binding with anything you put in your ES6/TypeScript class, but anything more you need to create a Observable or promise. Unfortunately, you can't just shove anything into the scope, digest, and WALAH! anymore.
And of course, all the cool stuff they mention on their website: https://angular.io/features.html
Hope that helps!
Support for different languages TypeScript, Dart, ES5, ES6.
Change detection is much more effective
Support for isomorphic applications where the same code can run on the server, the browser and a WebWorker in the browser
Moves more work to build time to reduce the time for the initial page load.
Simplified binding syntax
Improved DI
There are also lots of mostly smaller and tiny features that Angular2 doesn't (yet?) support which Angular 1.x does.
I have an AngularJS 1.3 application that will I suppose eventually move to AngularJS 2.0. I've watched the videos from ng-europe and I understand there are many changes. As I expect development to continue with our AngularJS 1.3 code for the next 12 I would like to hear if anyone has any specific suggestions on preparing for 2.0.
My application is simple in that it creates no directives. In particular I would like to hear any tips on how I should go about creating controllers to get ready for them being very different in 2.0. Should I eliminate all references to scope in my controllers. Should I move everything to services?
I hope for some useful suggestions but of course specific ones so this question does not get closed.
Thanks
I think that so little has specifically been announced yet, and there's so much potential for it to change that it's a hard question to answer, e.g. check out this issue for an example of something quite fundamental that's likely to change since the ng-europe announcement.
Within my team we're trying to take the following approach:
Try not to use $scope (controller-as syntax).
Keep your controllers as light as possible by using directives to encapsulate UI functionality and services to deal with data models / API calls.
Use the new syntax for one-way binding where you don't need two-way binding. One-way binding will be the default for Angular 2.0.
Write some unit tests! It'll be much easier to do some significant refactoring if you have some confidence that your code will still work :).
Not only should that help with the move to 2.0 if / when that happens, but it should help your 1.3 apps too!
I'm still learning AngularJS, but I'm not sure if having less control (via javascript) as I read is a good thing. I mean, everything is done via bindings through HTML code / attributes. How can I access $rootScope , or any of the services other than having them injected to my controllers via 'low level' javascript code?angular global variable doesn't hold much when logged to the console. What else to use to discover possible methods accessable via javascript?
I suspect this will be closed as opinion based but here is my opinion:
Angular does not remove your ability to control the page via javascript. Instead it isolates that code that manipulates the DOM. The learning curve for angular is a little like a roller coaster, in that you feel differently about the framework after learning a new piece. I felt really great after learning how templates and controllers worked but then felt low after seeing the limitations and complexities it created only to feel really great when I learned about Directives and how to manipulate the DOM through them. Six months into it, I am comfortable with Angular and would never go back to all the boilerplate of straight JQuery/javascript.
An important thing to keep in mind. Angular is not a UI library but rather a way of organizing your development files. There are many integration libraries of well known UI frameworks into angular Directives but by far the most popular is Twitter Bootstrap.
This blog post really nailed it: https://coderwall.com/p/3qclqg
I am new to phonegap development & I am trying to pick a framework to use. I'd like to use AngularJS as I've read good things about it, but I'd like it to work with Parse.com as a backend. I noticed that one Parse.com they don't specify any compatibility with Angular, and all their documentation and Javascript API requires Backbone.
I know AngularJS supports http, so I can communicate with Parse using the REST API. But is this going to end up being a mess & will I save myself time & stress if I use Backbone with the Parse.com Javascript API instead?
I have not worked on Parse, but I believe as long there is a REST API available AngularJS can very well integrate with Parse.com. These links substantiate that fact
https://parse.com/questions/does-any-know-of-any-angularjs-sites-that-are-built-with-parse-that-are-open-source
http://brandid.github.io/parse-angular-demo/#/
Said that, AngularJS is a very capable framework with a steep learning curve. The simple stuff is simple but one needs to put ones head down and start learning the not so simple stuff like directives once one starts building any decent size application. The more you invest in learning AngularJS the more rewarding it becomes.
It has a very clean separation in terms of view and code. The code is further organized into modules, factories, services, controllers, directive, filters etc.
But still nothing stops you from creating a mess with the implementation :) What I have realized over the time is even if you create mess within AngularJS the effects are localized rather than affecting the complete application, due to the modular nature of Angular.
I suggest you try creating or looking at some samples with AngularJS (such as TodoMVC)
This is how i felt learning and implementing AngularJS solutions
Thanks for bring up our Parse x AngularJS boilerplate - we've just updated it today too.
Our entire site getbrandid.com is built with Parse x AngularJS and no servers of our own.
We built this boilerplate after because having spent a few years building BRANDiD, we had a lot of best practices to share with the Parse and AngularJS communities. We think it is a match made in heaven, and is the fastest way to build powerful complex, highly maintainable serverless apps.
We've basically extended the Parse SDK to support AngularJS bindings, we've eliminated a ton of boilerplate code, and most importantly, we've established an architecture for large serverless apps using Parse and Angular.
I highly encourage you to check it out -
Parse x AngularJS Boilerplate
Actually Parse's documentation does not say that you have to use Parse with Backbone, it just says that some stuff are compatible with Backbone classes, like the Collections object, which might be useful ONLY IF you use Backbone.
The big hassle of using 3rd party stuff inside angular is its lifecycle, as it uses POJOs and only watches for changes in these objects at specific points in time - Check the Scope Life Cycle documentation for more info.
Given that, when Parse returns its callbacks, AngularJS might no longer be observing those Parse objets, so you need a way of telling angular that thing changed, and you have to do it inside the digest loop, for example using $scope.$apply
I created a small wrapper for Parse.Query and Parse.Object to avoid the need for $scope.$apply all the time, let me know if you find it useful: https://github.com/felipesabino/angular-parse
The easiest way I found to communicate with the parse.com backend is to use the jimrhoskins/angular-parse Angularjs module that replaces the (backbone) ParseSDK.
Ads instant :-) I included it in this angular/parse boilerplate.
We've been using this method fairly frequently. We decided to document our experience. Its a 2 part series on building angular apps with a parse backend. Hope it helps!
I'm really enjoying learning to use AngularJS. Now I'm looking for components I can use with it. I've been looking at Angular-UI components but I'd like to know if it's possible to use the nice, supercharged components in ExtJS. Does anyone have experience with this? Any hints or tips or Angular directive libraries?
The company I work for is making a similar move. We currently rely heavily on an older version (3.x) of ExtJS, and the effort to upgrade to the current (5.0) version is at least equal to the effort required to move to angular.
To answer the question (to the best of my limited knowledge):
They can exist together in the same JS application.
Can you use UI elements of ExtJs with Angular?
You can put angular in control of markup via HTML templates in Ext.
Is this a wise idea?
Probably not.
Why would I consider doing this?
I need absolute control over the markup and don't care about possible page load issues
I need to serialize or de-serialize in some special way that Ext doesn't innately provide
I need to do something special like pub/sub (still totally possible with Ext)
In our case, it is a proof of concept for a few modals. If I am biased, I am biased in the direction of ExtJs (which is a huge statement given my background). The more exposure I have to ExtJS, the more I personally like it. I've used several frameworks in the past like Ember, Backbone, KnockoutJs and AngularJs and they are excellent tools that are reaching a level of maturity that makes them excellent choices. That said, they don't follow the same development model/pattern that ExtJs does, and I don't think a direct compare is fair to either side.
It would be almost like comparing Ext to Node (silly, I know).
If your project requires some special functionality that you don't believe is possible in Ext, you are probably like me and have limited experience with it. If you have a lot of experience with Ext, and want to try what we are trying, I say go for it. The single downfall of Ext is the size of the built package that is delivered. Another small framework isn't going to help that, but it also isn't going to cause more pain.
In the end, for me, I just love JS and expanding my knowledge of how things work now and in the future.
For the post above asking about the lack of traction for Ext: the answer is simple... it's not free, and thus not an option for many of us who aren't writing commercial software that fits well with the license.
In our AngularJS app at work, we have integrated a 3rd party ExtJS app with it, not for its UI components though. We open certain popups of that app based on user input and when the user commits data in the popup, we respond to ExtJs events to refresh our app. AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
Why do you need AngularJS anyway if you have ExtJS? I agree learning Ext can be somewhat difficult though once you've bitten through it there is nothing better at the moment. The only disadvantage is the heavier footprint but who cares? It's not like it's causing any problems... We use nothing but ExtJS at work and the progress in our apps is amazing. It integrates seamlessly with Spring MVC. We don't need to hack in HTML directly which I consider more of an advantage than a disadvantage: no more writing tags, no more open/close tag issues, you can still use css and Ext handles any browser incompatibilities so what else do you need more?? Angular is just the new kid on the block but in total it can not (yet) compete with ExtJS. It doesn't even com close. Just my 2$.
Sencha is planning to add support in the framework. Please find the link at the bottom for reference:
At SenchaCon in Las Vegas on November 7-9 2016, Sencha will be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/