5 ms·
I evaluated React and Angular 2 several months ago and picked React. Some of the issues I found in Angular 2: The HTML template in Angular 2 is stored in a str
by petilon 10y ago
I evaluated React and Angular 2 several months ago and picked React. Some of the issues I found in Angular 2:
The HTML template in Angular 2 is stored in a string. This has several disadvantages:
1. Editors can't do syntax coloring.
2. Editors can't do auto-indenting.
3. Editors can't offer "intellisense" suggestions.
4. Editors can't match tags.
You embed variables in this template string like this: '<div>{{hero.name}}</div>'.
This means:
1. Compilers can't find typos or find syntax errors at compile time.
2. If you make a typo in the variable name you don't get a compile-time or run-time error, instead the value is simply not displayed!
3. Tools can't refactor (i.e., rename) variables embedded inside the template.
4. No intellisense for the embedded expressions.
You have to learn weird syntax such as ngFor whereas in React you just use a JavaScript for loop.
In React you embed HTML inside the TypeScript and VisualStudio treats both the HTML and the TypeScript as first-class citizens. You get compile-time checks and intellisense for both the HTML and the TypeScript code! You can even put breakpoint inside the template and step through loops whereas in Angular you can't step through an ngFor.
Note that some of the above may have changed since I last looked at Angular 2.
- beefsack 10y agoThe template vs. JSX argument is highly subjective; a lot of people go the other way because language extensions break existing plugins, require extra build tooling, and add complexity.
- DCoder 10y agoThe same could be said about the "JavaScript vs TypeScript" argument. I can see that argument, but in my opinion, the safety nets provided by TypeScript and TSX are well worth the initial learning curve.
- dfsegoat 10y agoWhich editors? JetBrains Webstorm has the same things for both Angular2 and React. https://www.jetbrains.com/webstorm/whatsnew/#v2016-2-angular-2 https://www.jetbrains.com/webstorm/whatsnew/#v2016-2-angular... I do agree that I really really was a fan of the backticks for ES6 / react for templating. Avoiding the whole " vs ' escaping nightmare is something i've always looked forward to. That seems like a very simple fix for them though, potentially. edit: tone
- drjackal 10y agoIn the page you linked the template is stored in an external html file in which case you get syntax checking for html but not the embedded expressions.
- Noseshine 10y agoI only do backend node.js so I don't know much about the frontend stuff, but when I look at https://blog.jetbrains.com/webstorm/2016/04/angular-2-workflow-in-webstorm/#ng2-completion https://blog.jetbrains.com/webstorm/2016/04/angular-2-workfl... it seems to me they in fact do support the embedded expressions?
- dfsegoat 10y agoYep - thanks, this is a much better example than mine.
- dcgudeman 10y agoNumber 1 and 4 are totally false. PhpStorm does both of these.
- alxhub 10y agoWith AOT compile, templates are turned into Typescript code which is typechecked. The IDE integration isn't there yet, but it's in the works. Also with AOT compile, breakpoints inside templates are possible, so you absolutely can step through an NgFor :)
- andyfleming 10y agoI'm not saying angular is better, but "can't" might be a bit strong. Maybe "don't currently" would be more appropriate since some of those things are very possible if not already in existence.
- Bahamut 10y ago1 through 3 are false - in fact, it has been advertised by JetBrains that TypeScript with WebStorm can detect string templates when using the Component decorator in Angular 2 & the template option and parse them while doing debugging & syntax highlighting, and this was months ago. I'm sure 4 can be solved by editors, if it hasn't been already.
- namelezz 10y agoCan you use html-loader to load templates from external html files? Edit: You can use external html files. Just look at their tutorial[0] using html-loader at the very end. templateUrl: './app.component.html' [0] - https://angular.io/docs/ts/latest/guide/webpack.html https://angular.io/docs/ts/latest/guide/webpack.html
- deleted 10y ago[deleted]
- sajithdilshan 10y agoWhat editor are you using? I'm on IntelliJIDEA 2016.2 and it supports all first 4 items. But as for the latter 4 items, I hope those features will be available in IDEs in the future with the release of Angular 2 stable.
- dimgl 10y agoWhy not use a bundler to import the raw text from the HTML file?
- lucaspiller 10y agoAngular can also use seperate template files, I actually prefer this compared to having the logic and view (and CSS...) in the same file.
- sakopov 10y agoWhy would you want HTML embedded into your component? Sounds like a maintenance nightmare.
- dvdcxn 10y ago>The HTML template in Angular 2 is stored in a string. This has several disadvantages This is patently false. Just use "templateUrl" instead of "template". This allows you to specify a file instead. This is the way I always did it in angular 1 as well. I don't really understand why style guides & general practice recommend embedding html in the javascript though. It's horrible.
- mbreedlove 10y ago+1 for templateUrl. It really should be the de facto way of handling markup.
- akst 10y agoDoes Angular 2 do any compiler magic with these templates? or are the templates parsed at runtime?
- robwormald 10y agowe can do both. In JIT mode, we XHR for them and compile them on the fly. In AOT mode, we do that at build time and turn the templates into TS code, which we can then typecheck (thus giving you typechecking against templates) - the benefit of this is you don't have to ship the compiler code to the browser, don't pay the cost of runtime compilation, and the generated code is monomorphic and thus highly optimizable in browser VMs.
- akst 10y agoOh cool, sounds similar to what Ember is doing with it's glimmer engine. Are you guys compiling it down to dom api, like htmlbars did? or something similar to a VM style runtime like in Ember's Glimmer 2, where templates are compiled down to a series of opcodes? Or something entirely different from those approaches?
- bcherny 10y agoIf you're using TypeScript + templateUrl, you won't get static checking of templates. With React + TypeScript, you will.
- szines 10y agoYou probably missed the best option: Ember.js. It has all the best from other frameworks and it looks the only serious player out there.
- elliotec 10y agoBut it doesn't have billions of dollars of marketing power behind it to force the kool aid down dev's throats so we are SOL!
- tutuca 10y agoAnd exactly the worst performance of them all. Coupled with the kind of spooky side effects down your pipeline that you thought long gone since the first releases of ruby on rails...
- szines 10y agoPerformance? You compare 100 ms with 150 ms? But actully, the performance is not a question anymore, with the new Glimmer Engine 2 Ember will be the fastest framework, with full backward compatibility.