Angular 2 – Best Practises

https://blog.budacode.com/2016/06/27/angular-2-best-practises/?utm_source=hackernews&utm_medium=social&utm_campaign=angular2-best-practises

by budacode • 10 years ago

142 90 10 years ago

blog.budacode.com

jaimehrubiks• 10 years ago

Can someone recommend me good resources to learn (start with) angular 2? I am totally new, I am learning node after JS and after that, I would like to introduce myself to angular.

I have some experience on JSF but I suppose it is completely different.

dhaya• 10 years ago

Angular 2's own tutorial is a nice start: https://angular.io/docs/js/latest/tutorial/ .

g00gler• 10 years ago

I second that. I was able to go from the tutorial to building a couple of small apps on my own, painlessly.

Super nice IMO

buckbova• 10 years ago

Am I supposed to bite the bullet and just use/learn typescript?

"This chapter is not yet available in JavaScript. We recommend reading the TypeScript version."

kabes• 10 years ago

If you're willing to pay: https://www.ng-book.com/2/ is good.

spriggan34• 10 years ago

While I found ng1 useful, I'll never touch this one. I can see now how dependency injection can be both a blessing and also a curse in some contexts. I also can see how Typescript features can shape a codebase and ultimately make it look like Enterprise Java, instead of making it easy to use and to learn.

I also just don't like the over use of non standard features like decorators. There is a chance they don't make it to the spec, what then ?

Avalaxy2• 10 years ago

I also can see how Typescript features can shape a codebase and ultimately make it look like Enterprise Java, instead of making it easy to use and to learn.

Meh, I don't see how this is a bad thing. We need some more software engineering in the javascript space instead of cowboy hacking.

spriggan34• 10 years ago

We need some more software engineering in the javascript space instead of cowboy hacking

Are you saying that the ability to write entreprise java code is what separates "software engineers" from "cowboy hackers" ? That statement is arrogant.

My point is the use of Typescript doesn't produce idiomatic Javascript code, since it encourages writing front-end code a certain way. You might like it, fine, I'm personally not willing to deal with that kind of over engineering blessed in the Java world, I know what it leads to. If this approach was really successful everybody would be using JWT by now. Obviously they don't.

rahkiin• 10 years ago

As is shown with the decorator transpiling in both typescript and babel, it doesn't really matter if it never makes it to the spec: you can still use it using a compiler. I use it in my own production software and it is a real blessing when trying to use a more OO approach in a JS world

spriggan34• 10 years ago

it doesn't really matter if it never makes it to the spec

I does matter as there is difference between introducing type support in a language and introducing features that completely are non standard. Now imagine TC39 introduces a decorator syntax that is not compatible with Typescript's implementation ( it happened in the past with previous Typescript module syntax and the language had to break compatibility )

Angular 2 is completely based on the use of decorators to inject almost anything. Sometimes the decorator definition itself is bigger than the class using it.

Touche• 10 years ago

It matters if the person who wrote the babel plugin stops supporting it. This is the problem I have with the babel culture, I don't think people realize that they are really inventing their own language which is a mismash of various language features they like; some of which is part of a real language, some of which is not.

cies2• 10 years ago

Could someone tell me one-or-more reasons to choose Angular for a new project, now that the React ecosystem is mature enough to compete with it?

As I feel that from a conceptual/architectural point of view Angular is simply on a loosing path.

https://www.google.com/trends/explore#q=angular%20tutorial%2...

laurencei2• 10 years ago

If you run that some trends report - but with "Angular 2" - that shows a much higher uptake:

https://www.google.com/trends/explore#q=angular%20tutorial%2...

Secretmapper4• 10 years ago

The takeaway of course is that most of those probably want to pick up Angular 2 because they used Angular.

I made a conscious switch from Angular to React because React (and the flux pattern) really did reinvent how web components are built and it's incredibly intuitive. I simply don't see the same innovation in Angular 2 apart from 'we made Angular more modern'

dev3603• 10 years ago

Here is the same for CA: https://www.google.com/trends/explore#cmpt=q&geo=US-CA&q=ang...

david_p2• 10 years ago

It's more mature now that the Angular 1 experiment is over

It's written in TypeScript, so you can write your frontend in TypeScript. Many bugs averted.

You can use a real reactive model (http://victorsavkin.com/post/137821436516/managing-state-in-...)

chvid2• 10 years ago

My impression is that a lot of "mature" (aka boring old) companies like Angular 1 and the sound of Angular 2 over React.

For a number of reasons:

- In general Java and C# programmers like it.

- It is made by Google (perceived as more "mature", business like) rather than Facebook (young kids).

- It takes a lot of inspiration from server side development with its dependency injection and general terminology.

- And TypeScript is very similar to Java and C#.

(The list is a slight caricature but I hope the general point is clear.)

fchopin• 10 years ago

My impression is that a lot of "mature" (aka boring old) companies like Angular 1 and the sound of Angular 2 over React.

React has been around for a while, but it is still only a library. Angular 1 and 2 are frameworks. Also Angular 2 is a complete rewrite and not even in final release. I'm not sure how that is boring or old.

As with Angular 1, Angular 2 aims to be opinionated, so it should be clearer how to do things than with React. Especially now with the move to components, Angular should be easier do more with, without as much confusion. And Angular 2 is much faster, if you do it right, which was one of the reasons Angular 1 was left for React.

React is fine for what it is. It's somewhat "matured" for a few years and is not a bad decision if you go with it.

I don't think that you should just jump on the latest JS bandwagon, but Angular 2 is more than just "for mature companies" and "similar to Java and C#".

Really, the only frustration we've had with Angular 2 so far has been that it has been changing so quickly, but it's starting to settle down now.

nothrabannosir• 10 years ago

- And TypeScript is very similar to Java and C#.

react and typescript go hand in hand, now that typescript has .jsx support (as .tsx files)

jpkeisala• 10 years ago

I totally agree on "mature" (aka boring old). I make my income on enterprise and recommending React here would be like recommending Rails over Java or C#. Meaning possibility of landing contract would be significantly lower.

spdy• 10 years ago

The only decision you have to make if you like opinionated frameworks or not.

Both ecosystems are vibrant enough to stay for the foreseeable future.

laurencei2• 10 years ago

One specific reason I am personally choosing Angular 2, is that the Ionic2 Framework also uses Angular 2 [0].

So I can re-use code from my front end website on my native mobile apps for the new startup I'm launching. Much less code = quicker time to MVP, and lower cost of development.

[0] http://blog.ionic.io/angular-2-ionic/

petetnt• 10 years ago

Have you tried React with React Native[0]?

[0] https://facebook.github.io/react-native/

mbesto• 10 years ago

So I can re-use code from my front end website on my native mobile apps for the new startup I'm launching.

Just to be clear, Ionic is _not_ native.

pbhowmic• 10 years ago

As did I and for the same exact reasons. I am the only dev on the project (it is a startup) and we need to get to MVP fast.

ionwake• 10 years ago

https://www.google.com/trends/explore#q=react.js%2C%20angula...

david_p2• 10 years ago

Actually this seem to depend a lot on the exact search term, look: https://www.google.com/trends/explore#q=%2Fm%2F012l1vxv%2C%2...

sakopov• 10 years ago

I'm not sure I'm on the bandwagon that believes that commingling JS, CSS and HTML into a single "component" is a great thing. I just don't understand...

scarlac• 10 years ago

There's a lot to be said for separating concerns and it's still good practice within your component. No-one is really disputing it afaik, but the way we are/were creating web pages are based on a document-centric paradigm.

Single Page Apps (SPAs) are more app-like than webpage-like and if you're really going for reusability then your components need to have a say in how they are rendered. That means they need to provide /some/ HTML.

You can still create components without including CSS but you'll likely need to provide structure (HTML) in order to bind behavior/callbacks/events to it. It's still good practice to separate rendering (HTML/JSX/NG) and behavior.

EugeneOZ• 10 years ago

Your link proves controversial point :)

Please stop wars "a vs r" - it's counterproductive. Knowledge sharing is much better. If you don't trust me - read Twitter of Dan Abramov.

_RPM• 10 years ago

I'm honestly not sure why React being more mature now would be a reason not to use Angular for a new project.

Bahamut3• 10 years ago

For Angular 1 vs. React, I would just say depending on the resources you have - for example if a team is very productive with Angular 1 & there isn't enough time to get a team to pivot skills, then it may make more sense to go with that from a business perspective.

IMO there is one main reason to choose Angular 2 over React currently - perf. Angular 2 has significant perf improvements over the other libraries/frameworks out there, and supports incremental rendering as opposed to React's render all at once model. Angular 2 also will have the best built-in animation support of the various libraries/frameworks out there, in part due to the Angular team's collaboration with the Chrome team (this is true with Angular 1 as well).

Otherwise, React is more mature than Angular 2 & has a simpler API. Conceptually, Angular 2 and React share much in common, and architectures should look similar between well written apps in both.

bradleyprice• 10 years ago

What's the difference between Angular 2 and Reacts rendering? I was under the assumption that Angular 2 had implemented a shadow dom or something similar.

Not arguing that you are wrong, I just haven't kept up with any of Angular 2 and am genuinely curios.

0xfaded• 10 years ago

I'm trying to find more info on angular 2 incremental rendering that you've mentioned.

I've despised angular since pre-1.0, mainly for performance reasons. Once the number of watchers hits 1000 or so, a browser will noticeably lag. A compete rerender will cause a noticeable freeze up.

I'm not currently using react either, but it's possible to do an incremental render through code, only rendering what needs rendering. React-dom will be needed to plug the result in the right spot.

rtpg• 10 years ago

I've found it more straightforward to transition to Angular over from a more server-side setup gradually. The template language is at least in the same general area as template languages for Django, Rails, etc.

The general tooling process is pretty simple, no need to convince people of the merits of JSX.

Architecturally speaking many people still like separating presentation from business logic.

Angular has a lot of mature tooling and wrappings around current libraries. Angular also offers a lot more tooling on the side, React is much smaller.

On an architectural side, while React keeps states in components, the state update mechanism is a bit obtuse compared to Angular's "scopes are just objects" philosophy.

It's dependent on how you view things, but if you're working on things where strict component decomposition is hard, and you "like global state in your views", then Angular's state mechanism (controllers) could work better for you.

Some would also declare that the non-turing-complete-ness of the template language in Angular is a feature, not a bug.

cies2• 10 years ago

Thanks for this!

woah• 10 years ago

You separate your presentation from your business logic in React. What React gives you that Angular doesn't is the ability to separate your presentational logic from your business logic. Angular makes you put presentational logic in with your business logic because presentational logic simply cannot be expressed with the templating format.

I would argue that a distinction that you make yourself, based on your application's architecture is more meaningful and useful than one made by some arbitrary separation of source file formats.

ta_donk_gt3• 10 years ago

Essentially it boils down to whether you prefer a cohesive all-in-one framework/platform (angular2) or a collection of semi- and fully-independent libraries (react). Pretending that one of those options is the right fit for everyone is not productive.

The only thing really missing from Angular 2 compared to the React ecosystem is jsx. Angular 2 and RxJS (and if you want throw in ngrx/store) allows a heavy focus on immutability, unidirectional data flow, centralized state, etc. that ends up very similar to the React ecosystem conceptually.

Both allow native cross-platform mobile with React Native (react) and NativeScript (angular2), and Angular 2 also gives you a nice hybrid/webview option with Ionic 2. Angular 2 also gives you a bit tighter integration with TypeScript, if that is your preference (which it is mine).

Personally, for me, I like both a lot but the full-framework and tight TypeScript integration fit my use cases and personality better.

rubber_duck• 10 years ago

I don't think JSX fits Angular 2 - it sticks to "views are markup based and code is in controller" traditional MVC which I prefer to JSX.

You mentioned TS but I feel like you understated it - it's the selling point for me. I have used TS + React but it's not the same thing - Angular was written with/for TS and it uses it to leverage all the advantages. React migrated from ES5 to incrementally add ES6 support and it shows. Also nobody uses flow outside of React unlike TS which has a decent community even outside of Angular and plenty of 3rd party type definitions.

devdoomari• 10 years ago

I'm using typescript with React right now...and typescript does a decent job with jsx checking. (saved me from a lot of missing / wrong prop name errors)

anyway, does typescript support some kind of template-string validation for angular2? If so, I'm going to really re-consider angular2 for my next project

SonicSoul• 10 years ago

This might have been mentioned already, but I do like that they're not reinventing the wheel with ng2 on every front and instead leveraging libraries that are either mature or likely to be the direction that web is heading. If you follow their quick start example you'll get Typescript, RxJS, SystemJS. RxJS is a very interesting beast that has been around for a long time in c# world and recently gained popularity in Javascript and implements what may be a precursor to browsers Observable() object and anything-as-a-stream management. Not sure how React is solving these problems but probably a good idea just to go through a few simple examples to see how they work.

Murkin• 10 years ago

The only reason - if you want to bet the future of your project on an untested framework, that seen no real world use and is still changing during its RC.

Or simply put. If they named "Angular 2" by its real name "Some other cool framework name" - you would not use it. (e.g. Polymer 2)

ken47• 10 years ago

I love the direct integration of async support in templates. You can extract the value of promises and observable directly in templates using the async pipe, which cuts down on a lot of boilerplate. That means your templates can directly subscribe to observables and auto update on changes. Awesome.

And there is first class support for component-scoped css, aka emulated shadow dom, which is great for large codebases.

sjclemmy• 10 years ago

I've been using ng2 for a few Ionic 2 Projects recently and its fantastic. Rxjs is an absolute must - it allows amazingly precise code to manage mutation. The way everything is a component is great. I can write a frontend app in a couple of days using Ionic 2. I'm so productive.

Edit: Why the downvote?

dkobia• 10 years ago

Yes! ng2 + typescript is phenomenal, and makes ionic2 a pleasure to use. What you get for the amount of time you put in is much more satisfying than with ng1. Fun!

MilnerRoute• 10 years ago

For what it's worth, Google's engineering director for Angular has said that Angular 1 was a framework -- "something you could just drop into a web page and get going". Angular 2 was supposed to be a "platform of capabilities."

"We're still doing the framework, but we're improving our ability to handle different languages. Our plan is to have versions that will work with many server-side technologies, from Java to Python... We would like to work to make Angular future-proof. As we have new releases for Angular, it would be nice if we could give just an upgrade script, so on every release, it would be stress-free."

http://thenewstack.io/google-preps-angular-2-final-release/

nojvek2• 10 years ago

I like the ambition there. Something as complex as angular will definitely require updates. Let's hope they actually walk the talk.

Illniyar• 10 years ago

Well there are 2 advantages to angular (1 or 2) over react:

1. It has effortless two way binding, which makes apps that allow mutating the same state from a lot of places easy and simple to make (though one could argue harder to maintain)

2. It uses a template rather then a precompiler (such as jsx) which has two advatages- since its html it makes cooperating with designers and the design process itself easier and it means you can use strings for modularity (for example saving a templatr in the database etc.)

skrowl• 10 years ago

3. You can just learn / hire for Angular 2. You don't have to learn / hire for React + insert 5 other pieces of the stack required to make a complete app.

sanmon3186• 10 years ago

Not directly related but I would appreciate any thoughts on which angular version one should go with, for a new development (fairly large enterprise project) at this point of time. How hard would it be to upgrade to version 2.0 if we start our early development on v1.5, assuming 2.0 is not ready for prime time (or is it?)

Bahamut3• 10 years ago

All depends on if you use any third party Angular 1 libraries. If you do, it can be trickier, as one will have to rewrite the functionality in Angular 2.

For example, my current company screwed itself by using a fork of UI Grid, and thus probably cannot upgrade the current app to Angular 2 easily.

devuo2• 10 years ago

It's going to take a massive amount of work to upgrade from 1.0 to 2.0. Don't do that to yourself. Just go with 2.0.

knicholes• 10 years ago

There's a way to bootstrap your angular 1 app with an upgrade module so that you can have both running at the same time. There are ways to upgrade/downgrade your services/components so that they can be used in either Angular 1 or 2. I know Angular2 is planning a release that breaks its forms API, so there may be more small breaks like that, so take that for what it's worth when deciding to use Angular 2 or Angular 1 (or both, once 2 stabilizes more for your enterprise app). It took me two hours to bootstrap my angular 1.5 app with the upgrade module, along with transpiling .ts files with my es6 JS. Be aware, though, that if you do use Typescript, your build system is going to change, and you're going to have to figure out how to use a module bundler (SystemJS or WebPack, probably).

It may get pretty confusing if you're not used to transpilation, too. For example, when you want to instrument your code for code coverage for your unit tests, you need to map that instrumented code and its results to your typescript files and not the es5 transpiled version of your code to see which lines are failing/not being run/whatever. There are good plugins, but there's definitely some effort involved.

People on my team are using Angular2 in their own projects and are claiming huge productivity gains. They love the relative simplicity and power.

bigmanwalter2• 10 years ago

After having gone around the SPA framework circuit, I'm back to using jQuery, routing with PathJS, and templating with Jade (compiled using a Browserify transform). It's just so much simpler to understand. No magic, and I have yet to run into any problems. If I needed more complex model stuff, maybe I would throw in Backbone.

I know these tools don't keep your code organized, but it doesn't prevent you from organizing it either. And I really do hate all the levels of indirection the monolithic SPA frameworks seem to throw in your face.

PathJS: https://github.com/mtrpcic/pathjs

Jadeify: https://github.com/domenic/jadeify

yawn• 10 years ago

I've done the same. In production, I've used jQuery, Dojo, and ExtJS. On side projects, I've used React, Clojurescript, and Angular 1. I don't like any of them. I'm back to using pjax.

bigmanwalter2• 10 years ago

pjax doesn't get enough love on HN :) Recently I got to use a pjax clone called smoothstate which splits up the pjax change event in just the right places to get fancy transitions going. Really enjoying it too!

Smoothstate: https://github.com/miguel-perez/smoothState.js

You can see how i used it at http://zviwaldman.com when you click any link.

JustSomeNobody2• 10 years ago

I'm eagerly awaiting a time when "the community" again allows this to be an acceptable alternative. Not that I wouldn't just go ahead and choose this.

Shicholas• 10 years ago

I'm going to get flamed for this, but I deeply regret the hours I put into learning Angular.

I'm still disappointed that Angular 2 is such a sharp departure from Angular 1 and certain aspects of Angular 2 development, e.g. the fact there is still multiple CLIs, the fact that "compiling to Dart" is still a thing, and the fact that it's still unreleased give me no confidence to build anything in Angular. I can't help but feel that with any library, less is more, and that Angular 2 is already trying to do way too much. IMO Angular 2 should be a Typescript-only library with one CLI and one way to manage your files (among other changes made in the name of simplicity).

All this being said, I hope I'm terribly terribly wrong, and Angular 2 becomes the super-simple-way-to-create-great-UIs that the authors intended that the whole community can follow along. This article however, made me ask myself if that will ever happen.

JustSomeNobody2• 10 years ago

It has been given the enterprise treatment. Enterprise devs love big.

yoz-y• 10 years ago

Do they? I also share the same feeling as GP. On one of our projects we have made the decision to use the Angular framework and I do regret that choice now.

jprince• 10 years ago

Best Practice to Level Up: Don't make a whole new framework that is in no way compatible with the prior framework and just label it the same expecting people to use it.

josephtate• 10 years ago

When an article about Angular is posted here, It seems standard practice to ignore the article itself—in this case, a writeup of Angular 2 best practices. Instead it becomes a discussion on React vs Angular, Angular 1 vs 2, frameworks vs no frameworks, etc. I’m not sure how to fix this problem—and I see it as a problem because the article bears discussion. But even with this comment I’ve derailed the original poster’s intent. So: is there a similar forum where Angular-oriented articles are posted and the starting assumption is that Angular is, well, good?

Angular 2 – Best Practises

Related Stories