9 ms·
Angular 1 and Angular 2 integration: the path to seamless upgrade
- pfooti 11y agoThis looks nice. I like the idea of more-or-less seamless integration between a1 and a2 on the same page, to allow for incrementally experimenting with a2 features without having to port the entire application over. With angular 2 moving to a virtualdom implementation we can get serverside rendering and some real speed improvements (if you move your virtualdom stuff to a web worker for example). This is rad.
- weego 11y ago<input type="text" [(ng-model)]="model.name"> Remember when we were worried about the semantic purity of our HTML.
- mariusmg 11y agoRemember separation of concerns ? Fuck that, let's just mash code and markup together.
- stupidcar 11y agoWhat concerns do you think you're separating exactly, when you're dealing with presentation-tier markup and code that combine intimately to a single component?
- bshimmin 11y agoI think a lot of the people worrying about this separation of concerns, and feel it's such an obvious problem that they don't even need to expand on it at all, are probably people who had to deal with hideous PHP (in the unenlightened days before Laravel, let's say) where views, business logic, and everything else get snarled up together in a horrible mess between some opening and closing PHP tags. I had similar worries when I first saw JSX. Having used it quite extensively, though, it does feel like it's a sensible idea now, from a development perspective at least. That said, it does increasingly feel like the days where certain people could just write HTML and CSS, and other people could handle the trickier JavaScript, are long gone (especially with things like Radium for React).
- Nagyman 11y agoBusiness logic should still remain separate. This would be display logic.
- pluma 11y agoThe fun part is that Angular (1, anyway) has pretend-separation. Sure, there's truth in DOM, but not really. Littering your custom directives all over the place may feel like progressive enhancement but if you're using an app framework like Angular your JS is likely already complex enough that you can't meaningfully consider it a mere "enhancement" -- we're talking core functionality, not fairy dust. People react (heh) strongly to React's JSX when they first come across it but at the end of the day I find React far more honest in its approach. Your Angular templates don't really gain anything from looking like they're just HTML templates -- instead you end up either serializing your data into some kind of string format or faffing about with magical nested "scope" objects (as if JS scoping wasn't enough to keep in your head). But in order to maintain that illusion you also have to buy into these huge layers of added complexity when writing your own directives. I'd rather go all the way back to steamrolling the DOM with Backbone templates than these pretend-semantical lumps of custom elements and attributes. Sorry for ranting. I'm still sore about being burned by Angular.
- thoman23 11y agoHow exactly were you "burned by Angular"? Many of us here are using it very successfully. And no, you don't need to "serialize your data into some kind of string format" (at least in the sense that you would never flatten JS objects into serialized strings in order to work with them). Scopes definitely take some getting used to, but they are not magical.
- ajanuary 11y agoI don't know that "semantic" is what you mean here. Semantics in HTML is about exposing the meaning of content through the DOM. Adding data-binding via attributes doesn't change that at all. <label>Name <input type="text" [(ng-model)]="model.name"></label> still encodes just as much semantics as <label>Name <input type="text"></label> I think what you might have meant, as mariusmg mentioned in a sibling comment, is "separation of concerns"? Personally I think that has diminishing returns as your application gets more complex. It's very difficult not to still have tight coupling, just hidden under a layer of indirection.
- jrochkind1 11y agoI think it's more like "syntactic" then semantic. <input type="text" ng-model="model.name"> Is syntatically valid HTML, although ng-model may not be a legal attribute name in standard HTML. On the other hand: <input type="text" [(ng-model)]="model.name"> Isn't even syntactically valid HTML. It kind of rubs me the wrong way too, although I don't know if it matters in practice, although I'm not sure it doesn't either. It does seem ugly.
- pfooti 11y agoI'm not sure you are correct. According to the w3 spec for HTML attributes [0], html element attribute names must consist of one or more characters other than the space characters, U+0000 NULL, """, "'", ">", "/", "=", the control characters, and any characters that are not defined by Unicode. Granted, it isn't necessarily what I'd expect to be legal, but it doesn't look illegal either. We may just need to add some logic to HTML colorizing syntax checkers in our IDEs is all. [0]: http://www.w3.org/TR/html-markup/syntax.html#syntax-attributes http://www.w3.org/TR/html-markup/syntax.html#syntax-attribut...
- jrochkind1 11y agointeresting!
- joshuacc 11y ago
- deleted 11y ago[deleted]
- escobar 11y agoI have been evaluating writing some new applications in Angular at work and was quickly turned away from it because before today the actual migration path seemed very unclear. Without a migration path, picking v1 for a new application at this point would be silly, and 2 is completely unready for production. Hearing that they are really planning on making it more or less "backwards compatible" is definitely a smart move from the Angular team, and makes me more comfortable potentially suggesting Angular as a framework.
- fougerejo 11y agoSince Angular 2 was announced, I had the feeling that I picked the wrong framework for our product with Angular 1, and was feeling regrets about that choice towards my team, to have blocked them with a framework without future. Knowing that we'll be able to slowly move our app to Angular 2, one feature at a time, is certainly the best news I've had in a while.
- fougerejo 11y agoBTW, why do I always feel like betting in a horse race when choosing a web framework/library? Hoping it'll be maintained long enough, hoping it'll not be deprecated after 6 months for the new cool kid...
- k__ 11y agoI had always a bad feeling about angular. The first guy I heard talking about it was like "It was made by an underdog at google" and "We often had the feeling about hitting a dead end when developing with it, but it was always because we were using it wrong" which both sounded strange to me. I used ExtJS, Ember and React. And never switched away from them because it wasn't maintained anymore. It just happened that people preferred to use new frameworks on new projects.
- jsprogrammer 11y agoExtJS went through some rough upgrade cycles as well. From what I remember, the 2->3 upgrade path covered a small subset of codebases.
- Bahamut 11y agoFor the curious, this is the official repository for the ng2-to-ng1 engine: https://github.com/ngUpgraders/ng-forward https://github.com/ngUpgraders/ng-forward
- mikeryan52 11y agong-forward contributor here: that is not the ng2-to-ng1 engine. ng-forward is an Angular team sanctioned library for eventually enabling Angular 2 syntax in Angular 1. It shares a lot of goals with what is outlined in today's announcement but is more catered for teams that want to start an app today with the quickest possible migration strategy. The code for the ng2-to-ng1 engine (called ng-upgrade) is either not public yet or will be at https://github.com/angular/angular https://github.com/angular/angular
- Bahamut 11y agoAhh, I was mistaken with what I saw in the gitter then - thanks for correcting me!
- Goranek 11y agoI know that hating angular is popular these days, but i'm still using it, and it serves me well. Looking forward to Angular 2!
- NicoJuicy 11y agoYeah, it seemed that way because there was no migration path... That is fixed though ;) Almost everyone i know is using something in the likes of AngularJS
- jbergens 11y ago> Almost everyone i know is using something in the likes of AngularJS I do wonder what you mean with that. I think that both React and Ember are different but if you mean a javascript framework for building single page applications you're probably right.
- NicoJuicy 11y agoEveryone who is following a bit of technology and/or searching for extra developers ( Brussels/Belgium) are all using AngularJS. Haven't found any mention of EmberJS or React or anything ( doesn't mean they don't know it) There was only one difference, someone used AngularJS with Typescript :) ==> c#
- thoman23 11y agoAgreed. Once you are fully up to speed with it (and not at one of the local optima as brilliantly shown on the famous Angular learning curve diagram), it's a pleasure to work with.
- aikah 11y agoSee , that's how you manage an open source project , you listen to your community , and yes people can have relevant suggestions. Angular JS became successful because of its pragmatism but also because it allowed more than 1000 people to contribute to its core, not because it was a "Google project" . Everybody knows what other project i'm talking about.
- us7892 11y agoWhat other project are you talking about?
- chralieboy 11y agogo
- billturner 11y agoIf they mean closed source, that list could include Google +, Google Reader, Google Wave, etc
- ldng 11y agoGWT ?
- acconsta 11y agoDart?
- scorpion032 11y agoI think Polymer is in Google's strategic plan and will be in much more limelight even going forward.
- space_fountain 11y agoPolymer is a pain to use by comparison to practically everything. My understanding is it's meant as basically just a comparability layer.
- oDot 11y agoAnyone knows how Angular 2 plays with "outside" code? It is very frustrating, having to convert everything to a directive when using with Angular 1.
- gedy 11y agoI see 2-way data-binding is mentioned here and will still be supported (good). Curious why has 2-way now become 'uncool' recently, e.g. React? 2-way is what got me excited about client side JS due to the code reduction in an average app. Is just that Angular 1's implementation was non-performant? (lots of other frameworks use it as well, e.g. Knockout, RactiveJS, etc).
- pfooti 11y agoTwo way data binding is awesome and neat and shiny and chrome. It's also pretty slow; a lot of pragmatic angular work involves keeping the number of watchers firing during digest cycles minimized. If you have a lot of data that's all two-way-bound by default, but aren't making any use of the bindings, that's a lot of wasted cycles. I mean, my app has a lot of data in it, stuff like {{username}} which rarely ever changes in the model, so I don't really need two-way binding for it. What I like here is that one-way binding is the default, and you can do two-way stuff if needs be, because sometimes it really is the best call.
- gedy 11y agoThanks. Yeah 1-way as default is reasonable. I suppose in my case I haven't seen performance issues due to data size, and also have taken to using RactiveJS which allows both 1-way and 2-way via [[someProp]] and {{someProp}}, respectively.
- lemevi 11y agoI think two-way binding going by the way side because developers are tired of having to deal with unintended loop backs. You start having to add weird flags to your data to indicate that data changes were the result of user actions and not changes from the backend to avoid endless event loops. Two-way binding results in more code that's buggier whereas one-way binding with actions results in much more organized and understandable code with none of the unintended consequences.
- gedy 11y agoI'm thinking that's a framework-specific or coding-style issue? From using a number of frameworks, I've virtually never had issues with endless loops. Perhaps it helps that frameworks like Knockout, etc don't trigger change events when the value is the same.
- netfire 11y agoWhy isn't there a single domain for the angular project? From what I can see there seems to be 2 main ones: angular.io (for angular 2) and angularjs.org (for angular 1.x) as well as angulardart.org and other sites for angular material design (material.angularjs.org) and angular firebase (firebase.com/docs/web/libraries/angular/). Why not have a single site (or at least a main domain with corresponding subdomains) with similar documentation and navigation? In addition, searching for "angular" in Google provides no obvious distinction between the different sites. For a Google sponsored project, I would have expected better attention to the search meta-data to make the distinction clear.
- joshuacc 11y agoPart of the reason is so that they can track usage trends to see how long they should continue supporting Angular 1 after Angular 2 is released.
- danneu 11y agoThat could be solved by analytics on one domain. For example, http://getbootstrap.com/2.3.2/ http://getbootstrap.com/2.3.2/.
- _lce0 11y ago> In addition, searching for "angular" in Google provides no obvious distinction between the different sites. You can try to search using DuckDuckGo as it highlights _official sites_. Really useful feature, even for quick one-time searches. https://duckduckgo.com https://duckduckgo.com
- netfire 11y agoAren't they both official sites though, just of their respective versions? (although admittedly, Angular 2 is still in the Developer Preview stage)
- crimsonalucard 11y agoThe dramatic shift from version 1 to 2 is generally a sign of design mistakes. Angular 1 should have been angular beta.
- ahoge 11y agoBrowsers and JavaScript have changed quite a bit since 2009. You couldn't have created something like Angular 2 6 years ago or even 2 years ago for that matter. Angular 2 is possible today thanks to technological advancements.
- arcosdev 11y agoFor example?
- crimsonalucard 11y agofor example like quantum chips, neural nets and big data are all now buzz words that changed the technology of javascript forever. Seriously though, if anything has changed it's ES6, and that doesn't count as it's all sugar that compiles back to ES5.
- ahoge 11y agoFor one, it's written in TypeScript. There is one codebase for ES5/6, TypeScript, and Dart. A big benefit of Angular 2 is the better tooling you get with TypeScript and Dart. It uses things like classes, decorators, and the <template> tag. It uses a virtual DOM, which is still a fairly new concept. It can run in Web Workers and you can even use it for native applications which do not have a regular DOM. It really is quite different from anything one could have started back in 2009. Even those odd-looking attribute might have not worked because HTML5, which specified a lot of those things more precisely, was far from being done. Angular 1.x made pretty good use of the things which were available at the time.
- DavidPP 11y agoif I'm reading this correctly, they also planning to release a react native competitor? "Native mobile UI. We're enthusiastic about supporting the Web Platform in mobile apps. At the same time, some teams want to deliver fully native UIs on their iOS and Android mobile apps."
- fokinsean 11y agoThat is very possible. I found that statement a bit odd since they appear to work fairly closely with http://ionicframework.com/ http://ionicframework.com/
- alexd16 11y agoActually they will integrate with react native and native script. They talked about it (and demo it) in the angularu conference: https://www.youtube.com/watch?v=aHGmj_fqPLE&feature=youtu.be&t=819 https://www.youtube.com/watch?v=aHGmj_fqPLE&feature=youtu.be...
- deckiedan 11y agoSlightly off topic, sorry, but I do HATE how blogger.com sites are totally unusable with JS turned off / noscript / etc ...
- muzmath 11y agoWelcome to the 0.01%
- tericho 11y agoSeeing a lot of comments about how Angular had no migration plan. Migration was discussed at length at ng-conf back in March, including a large portion of the keynote(s). They made it very clear a smooth and simple migration was top priority. Part of migration talk in keynote: https://youtu.be/QHulaj5ZxbI?t=12m43s https://youtu.be/QHulaj5ZxbI?t=12m43s Full playlist: https://youtu.be/QHulaj5ZxbI?list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7 https://youtu.be/QHulaj5ZxbI?list=PLOETEcp3DkCoNnlhE-7fovYvq...
- kylecordes 11y agoYes, it is a considerable frustration. At the beginning, the Angular team said something along the lines of "we are working on a Angular 2, after we figure out how it should work then we will consider migration and come up with a plan". For some reason this was widely interpreted as "there will be no migration plan".
- jbergens 11y agoI agree that there were a lot of misunderstanding going around but it has caused some problems. For new projects you have to choose a platform/framework. If you choose Angular 1 you might have to learn it and release a version of your app with it before Angular 2 is released or just before the migration path is clear. And it is till hard to estimate the migration cost/time. Or you could start with Angular 2 which you knew was not ready. It was and is also unclear exactly when Angular 2 will be "ready" making it a less interesting choice if you have/had a hard date when your app should be released.
- puddums 11y agoFair point, but worth noting that compared to the migration plan discussed at ng-conf in March, this is now an improved plan. For example, from the post just published: Wasn't the original upgrade plan to use the new Component Router? The upgrade plan that we announced at ng-conf 2015 was based on upgrading a whole view at a time and having the Component Router handle communication between the two versions of Angular. The feedback we received was that while yes, this was incremental, it wasn't incremental enough. We went back and redesigned for the plan as described above.
- __luca 11y agoOne of the biggest benefit of Angular is the vast amount of libraries built on it, like bootstrap-ui and ui-grid to name a few, how can we switch to Angular 2 until the most adopted ones don't switch too? (real question)
- ludamad 11y agoNotionally, the Angular1<->2 compatibility layer could handle mixing and matching, but I'm not sure how well it'd work in practice
- vanadium 11y agoDepends on how brave you are, really. While a lot of the development community will likely be tracking 2.0's development and working to release libraries not long after 2.0 releases...2.0 is effectively a 1.0 release all over again, so it's a matter of production-readiness not only where community support is concerned, but with itself. I'm waiting to see where things shake out on all sides after a few releases before really judging anything. We'll still kick the tires on our team here in the meantime.
- rimantas 11y agoOr the biggest failure. I guess that's how we get 5MB pages which could be done without any JS at all.
- omouse 11y agoEvery time I use Angular it feels like it's doing things the right way and it's becoming the Rails or Django of the JavaScript world. Wish I had fought to use AngularJs directives and $resource instead of messing about with ReactJS and jQuery ajax calls. With this migration plan it seems silly not to keep hacking with AngularJS 1.x
- thoman23 11y agoYep, even though directive implementation is verbose in 1.x, once you get really comfortable building them it's a pleasure to use them.
- dmak 11y agoI also share this sentiment. I also added a directive class that helps dramatically with code organization/comprehension. For example, listeners should be implemented here, view-model things should be setup here, etc...
- jbergens 11y agoIf you're using React you could look into different flux frameworks or even Relay+GraphQL to avoid jQuery ajax (or at least hide it). That last thing is the bleeding edge right now but looks promising. Flux is probably here to stay and you have a ton of libraries to choose from. I started with Reflux but is now using Alt.
- Bahamut 11y agoGraphQL requires backend infrastructure to use, which takes time usually to plug into the planning pipeline.
- __luca 11y agoCommets here made me think about whether it's forward-looking using angular 1.0 for next projects: i guess i'll go with React with my short-coming project then... I don't know what to do
- collyw 11y agoIn my limited experience React is way easier to comprehend than Angular.
- help_everyone 11y agoI've had the opposite experience, with a code base responsible for millions in revenue each month. Took less than a day to understand angular from nothing -- taking more than a day just to evaluate flux implementations with react.
- oompt 11y agoAurelia is looking nice right now.
- greenpizza13 11y agoCare to elaborate?
- robotnoises 11y ago> We've decoupled Angular 2's rendering from the DOM. Does this mean they are using some sort of virtual dom a la React?
- greenpizza13 11y agoThis is really great news for my company, as we have several Angular 1 applications still in development that can benefit from this incremental upgrade pattern.
- help_everyone 11y agoFinally! There has been talk for what seems months for an upgrade path. I'm so happy that there is finally some clarification.