9 ms·
Angular 2 Style Guide
- GnarlyWhale 10y agoHappy to see the pace at which the angular team is updating their support docs now that they are in beta.
- lobo_tuerto 10y agoYou mean now that they are in release candidate! ;)
- gremy0 10y ago"Write Angular 2 with style" > Request javascript version "This chapter is not yet available in JavaScript. We recommend reading the TypeScript version." LOL
- spriggan3 10y agoSame with their tutorials on angular.io . Angular2 is a framework build for Typescript and Dart, barely for Javascript and certainly not for ES5.
- zip1234 10y agoTypeScript is fantastic. Maybe it will be the undoing of Angular2 but I doubt it. The Angular2 team chose TypeScript because writing large applications using the limitations of ES5 is extremely difficult. TypeScript makes the task manageable and compiles back into ES5 (or whatever you want). The tooling is lightweight and freely available. Give it a try!
- spriggan3 10y agoTypescript isn't Javascript. I gave it a try already,for 2 years, and I used Angular 1 in production, I'm moving to something else like React or Vue.js, both supporting actual Javascript (even JSX isn't necessary). Good luck with your non standard syntax like decorators... Angular 1, despite its internal complexity, was just one file dropped in an html page and you're ready to go. There was nothing that mandated a complete rewrite with breaking APIs at first place. I complained to Igor 3 years ago about it. Well let's see how it goes.
- radicalbyte 10y agoTypescript is ES with totally optional type information, which protects you from a whole lot of bugs and for javascript bad API design (i.e. horrors like APIs which return different types with different input). I can understand that it feels strange, especially to someone who has had little exposure to languages outside of Javascript. However it is very much worth investing the time in learning it. 15 years ago I was making the same argument to Visual Basic developers about C#..
- Touche 10y agoYou're wrong, there are various other differences. Some of what TypeScript implements isn't supported by JavaScript yet (like import/export for example). It's very much a different language, which is fine, but it is annoying to constantly hear "it's just JS with optional types".
- pfooti 10y agoI use import / export in my regular javascript. I just use babel and browserify for it. I am sure that there are typescript language features that aren't "just optional types", but I don't think import / export is so far outside the normal ES/next kind of norm that you'd call it some kind of MSbomination.
- Touche 10y agoBabel is not "regular JavaScript", your import/export statements won't work when browsers and Node support them (you are required to include the .js extension and Babel doesn't enforce that). Babel also supports things like JSX and Flow.
- gshulegaard 10y agoI'm sorry but I will never use Angular 2.0 unless it can be used with straight JavaScript. I am a backend developer that, for personal projects, needs to do small amounts of front-end work. Anything that potentially increases complexity or involves a redundant learning curve (learning yet another _imperative_ language that compiles into JavaScript anyway) is not something I am going to invest time in. It's a shame too, I was a pretty big Angular fan. I used Angular, Ember, and even React and for several reasons I ended up settling on Angular as my favorite SPA framework (back in 2014 and 2015). Back when they announced Angular 2.0 would be TypeScript based, I felt like it was a mistake and that feeling has only gotten stronger as TypeScript has continued to fall behind EMCAScript (http://kangax.github.io/compat-table/es6/ http://kangax.github.io/compat-table/es6/). If TypeScript adopts compilation down to WebAssembly, that would be a reason to learn it/give Angular 2.0 a chance for me, but until then I will stick to Angular 1.0 or move towards React for my next project...which is a shame because I really don't like Reacts focus on the V of MVC. Maybe I will go back and check on Ember, but I wasn't a fan of it's tight binding of Models to Views (sometimes I just need a VC or a V and not a full MVC)...but maybe it has changed.
- Roboprog 10y agoRemember GWT? We were all going to write client-side widgets in Java. Turned out, that was a nuisance.
- paulddraper 10y agoI'm using it with ES5 only.
- Roboprog 10y agoYou should put up some examples on github and post a link. TIA
- spriggan3 10y agoWhy don't you post some snippets or gists so that everybody can get a mesure of what a large app looks like with Angular 2 ? that's right, it is not designed to be used with ES5.
- paulddraper 10y agoWell, the project is not open source :(
- meeper16 10y agoLooking forward to forced indentation + javascript.
- ihsw 10y agoIt already is forced -- see: ESLint.
- hockeybias 10y agoGreat progress!
- pbreit 10y agoAny tips for a mere mortal who looks at Angular and finds it incomprehensible? React? Vue.js? Or just stick to good ole Rails/Python for now?
- jashmenn 10y agoOne way to think about Angular is like this: Different modules on your page are broken down into components, which are like "regular" HTML tags except that they have JavaScript functionality attached to them. Your app is a tree of components. React is great as well, but if you find Angular incomprehensible it's not clear you'll find React much easier. One major difference between React and Angular is that the Angular community _tends_ to separate their templates from their "controller" code, whereas the React community _tends_ to intermix their templates with code ("PHP" style). The result is that in Angular you have a few funny characters in your HTML to learn (e.g. `*ngFor="let foo in bar"` for looping) whereas in React you'll use JSX and use JavaScript for loops. It's pretty clear to me that component-based webapps are here for the long haul. Even if WebComponents ends up being the future, the concepts you learn in using either Angular or React will be more-or-less transferrable. It seems to me that Angular and React are becoming more similar over time. For typing, Angular uses TypeScript and React uses Flow. For data architecture, both communities are gravitating towards some sort of Flux (redux / ngrx). You can even use JSX in Angular if you want to. Shameless plug: I've written a book on Angular 2 which talks through, step-by-step, how to understand Angular. The first chapter walks you through your first app and you can get it (for free) here: https://www.ng-book.com/2/ https://www.ng-book.com/2/
- netinstructions 10y agoYou could also run the Codelyzer (A set of tslint rules for static code analysis of Angular 2 TypeScript projects) with the recommended configuration to match this style guide. https://github.com/mgechev/codelyzer https://github.com/mgechev/codelyzer
- abiox 10y agodoes angular2 support preloading data/setting initial-state, such as by server-side templating? if not, can i run angular2 in, say, nashorn to generate view data?
- kabes 10y agoYes, it's called 'angular universal'. Here's a talk of ng-conf: https://www.youtube.com/watch?v=TCj_oC3m6_U&index=5&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j https://www.youtube.com/watch?v=TCj_oC3m6_U&index=5&list=PLO...
- bshimmin 10y agoI don't much care for Angular, but this is some seriously beautiful documentation.
- r0m4n0 10y agoI'm really excited to see there will be an official style guide that was truly lacking in v1.x Having worked on various teams (now we follow https://github.com/johnpapa/angular-styleguide https://github.com/johnpapa/angular-styleguide), its truly a maintenance nightmare without a verbose Angular style guide for reference.
- lobo_tuerto 10y agoLacking how? John Papa's style guide has been around for some time, and it's endorsed by the Angular team. He is in charge of the Angular 2 style guide too. I bet he will do a good job with this one too.
- devNoise 10y agoJust to follow up. John Papa's original style guide was create after he had experience with building Angular 1 apps and got feedback from other developers. An Angular 2 style guide can't be fully formed right now because no one really knows what all of the best practices are yet. As all of us get more experience using Angular 2, the style guide will get better.
- r0m4n0 10y agoEndorsed vs official are two different things. There are many style guides (and some don't agree with the entire John Papa style guide leaving room for reasonable debate)
- andrewstuart2 10y agoI'd highly recommend using something like eslint, which can be integrated into editors and CI flows to assist with most of the style guide choices (at least the never/always kind) that your organization makes. Use some style guide as a base and then agree on your own internal exceptions/additions as a team, then just implement those rules, and eslint can let you know when you've forgotten something. Personally, I find the editor (via Syntastic in vim) integration most helpful since it's more of a warning and not an overbearing release gate.
- robotnoises 10y agoFrom: https://angular.io/styleguide#!#style-03-03 https://angular.io/styleguide#!#style-03-03 > Consider naming an interface without an I prefix. They give the same recommendation in the Typescript style guide, but I still don't understand why.
- netinstructions 10y agoThis is a common discussion I see on the internet[0][1][2][3]. Paraphrased below You shouldn't need to know whether the client is using an interface or an implementation class. List represents a list, and a User represents a user - not an IUser. Another problem with using I, is that (oddly) we use it to communication the implementation decision of using an interface. Usually we don't want implementation decisions expressed so loudly, because that makes them hard to change. [0]http://programmers.stackexchange.com/questions/117348/should-interface-names-begin-with-an-i-prefix http://programmers.stackexchange.com/questions/117348/should... [1]http://stackoverflow.com/questions/541912/interface-naming-in-java http://stackoverflow.com/questions/541912/interface-naming-i... [2]http://stackoverflow.com/questions/5816951/prefixing-interfaces-with-i http://stackoverflow.com/questions/5816951/prefixing-interfa... [3]https://blogs.msdn.microsoft.com/brada/2004/02/03/why-do-interface-names-begin-with-i/ https://blogs.msdn.microsoft.com/brada/2004/02/03/why-do-int...
- robotnoises 10y agoExcellent reply, thank you. To me, it still seems more about people's gripe over the very existence of interfaces. If anything, using IUser in lieu of User is a pretty clear signal to, say, an uninitiated developer, that you shouldn't be attempting to create an instance of "IUser."
- ben_jones 10y agoPeople have brought it up but I feel the need to drive it home: while Typescript is amazing and, when used correctly, can allow more expressive and bug-free code then es5, adoption will suffer greatly and has the potential to detract from the overall success of Angular 2.0.
- rubber_duck 10y agoTypescript is the feature of Angular 2.0 for me There are plenty of ES5 frameworks out there - the biggest value proposition Angular 2 brings for me is that it's built with typescript from the start and it leverages all of it's features (ie. modern OO tooling that comes with languages like C# and a language that feels familiar to C#/Java devs) and builds a GUI framework on top of it that works in the browser. Without being native TS Angular 2 would have very low appeal to me.
- Roboprog 10y agoYou know, there are some of us who like the fact that Javascript is a dynamic language that supports functional programming (FP) style. For us, "being like Java" is not a plus. My IDE already does a pretty good job at type inference while I am editing, as well as displaying the comments about each symbol as I click on it.
- chvid 10y agoSo Angular is all TypeScript now?! With a recommendation for Microsoft's editor at the end of the article. Anyways - it seems like a set of reasonable conventions; Java/C# programmers should feel right at home. The only thing that sticks out is the file name convention. If you only have one thing pr. class then why not use name as it is directly in the file name? (HeroComponent.ts instead of hero.component.ts)
- teen 10y agoIn the first suggestion they suggest breaking up a component into its own folder. That quickly becomes a completely mess imo. Better to prefix the filename with the component (hero.service.js) and leave everything in the same directory.
- EugeneOZ 10y agoIf each component have 3 files, how can 10 folders (with 3 files inside) be a more mess than list of 30 files with prefixes?
- Roboprog 10y agoHow many symbols are all of those .ts files going to put into the global namespace?
- scriby 10y agoThe .ts files will be compiled to AMD modules, so none of the declarations will be in the global scope.
- Roboprog 10y agoThanks, I had not seen that before. Interesting trick: Call a "registration" function with a string array (of dependencies) and an anonymous function (IIFE) with parameters for each dependency which the registration function injects. Thus, the dependencies are accessed as closures over the outermost func's params, rather than as globals. E.g. - define( [ 'jQuery' ], function ( $ ) { ... return { ... } } ) where the 1st elipses are all the private/setup code, and the second elipses are whatever methods/properties the module exports. (this dummy only wants jQuery, but the list can be longer)
- vmateixeira 10y agoAnyone getting along with angular forms?