Angular2 is terrible

Jiedao jdon 2021-05-04 18:22:25
angular2 angular terrible

We use Angular 2 As our front end , And I wasn't involved in the decision , I came to work on this project relatively late . This article is not a comprehensive review of the framework , It's a series of observations after more than two weeks of use . I don't think using it for two weeks would make me an expert , Any corrections are welcome , But for its value , I think using Angular 2 It's one of the biggest mistakes of our project .

A crumbling Foundation

Angular 2 The stable version is built on experimental language features (TypeScript decorators) and Rx.js 5.0 On the test library . Let me repeat : The framework claims to be more stable than its dependencies and the language it is based on . It's absolutely crazy . When Angular2 When the core dependency of is not mature , It should not claim to be stable . Building an application on it is as fragile as building it on a deck of cards . If TypeScript decorators The semantics of the proposal has changed , Or worse , What happens if you completely undo it from the language ?

There's no invention here

Angular 2 It's a framework in the truest sense of the term . It uses its own module loading system ( because JavaScript Not enough of these systems , Am I right? ?), Try to abstract the entire browser platform , Even loaded a full HTML Parsers and antivirus programs . It even speaks its own language - Structured instruction , The Conduit , Statement , modular , injector , service , View encapsulation , Decorator .

This adds a big difficulty curve to frame learning . Even familiar with existing browsers API and Reactive For people in the framework , Need to relearn Angular How is it realized . Like pipes , Almost not at all UNIX The Conduit , Or traditional template language filters . And so on :Angular Of HTTP The client returns Observable, instead of Promise, Forcing you to learn more than just another asynchronous Library , But it's a completely different asynchronous mode .

This is particularly bad , Because despite the statement of the document , In use Ajax When asked ,Observables There's nothing like Promises There are obvious improvements .

many Rx.js Methods are actually suitable for streaming data , But it's over designed for single valued requests .

One Ajax The request is single , Use a similar method to run Time will always get only one value in the pipeline , Obviously, it has no semantic meaning .Promises On the other hand, it represents an unfinished value , That's exactly what it is. HTTP Request for . It took me hours to force Observable The behavior switches back to a Promise, It's very simple to use Promise.all , It works better than Rx.js Much better .

Premature abstraction

Angular Like to pretend it's a platform independent platform .

It abstracts the browser API To achieve this - Angular Use your own HTML Weird variants to replace DOM, Use your own routing and location Service replacement browser history and local location API, Their own HTTP Client side substitution XHR and websocket. Unfortunately , These are what modern applications may need API A funny collection of kids . Any time you just need to LocalStorage, geolocation,notifications It's as simple as , Otherwise, it is easy to break the cross platform compatibility of applications .

what's more , in many instances , This abstraction is totally unnecessary . some Angular platform API Just around the browser API Make a thin package , Unless it makes it harder to use , Otherwise, it doesn't provide useful abstraction .location and HTTP Client services are two good examples .

you are here Angular The knowledge learned can't be reused in other places . Like learning Angular Of HTTP client , This knowledge is in Angular It's useless outside the universe .

HTML minus sign

Angular Claim to be HTML Plus - That is to say HTML, But better . But this is wrong .

First ,Angular HTML No HTML. HTML Properties are case insensitive , and Angular yes . It may look like a small inconsistency , But it means anything based on HTML Building tools can't support Angular Version of . WebStorm The code is automatically completed , for example , Suggest ngif Instead of ngIf The two are equivalent in HTML in , But in Angular HTML Middle is not .

secondly ,ANgular HTML The grammar is not designed properly , It's far more complicated , And it's full of little traps - Just look at it. Template syntax reference Number of red warning boxes on . There are some things that are not mentioned in the guide .

( I'm not going to talk about Html Problem description of ..)

Unnecessary vulgarity

Components are most modern JavaScript The basic building blocks of an application . One of the best things that happens in front-end development is :Web Applications should be organized as separate 、 Reusable components . Ideally , This means that components should be easy to create . and Angular It's the opposite .

To be in Angular Create a component in , You have to be JS,CSS and HTML Create a separate file . According to the settings ,JavaScript It may need to be based on TypeScript And from the SCSS or LESS Of CSS Compile , So a component needs five files . With so many files , You need a separate folder for each component . The component itself is @Component decorate , Declare component metadata , Like the pattern , Templates and selectors , Make components reusable elsewhere . Then inject component dependencies through the constructor , And remember to declare the component lifecycle interface . Last , You need to declare the component in the module file of the application . Just to build a single component, it's a lot of work .

A single file component can also use Angular, But you need to be in TypeScript Declare tags and styles in itself , also ( as far as I am concerned ) And we need to manage CSS Preprocessor for variables ( Such as SCSS) Are not compatible . And Vue Compare with a single file component of . about Vue, Mark , Styles and logic are declared in a single file . Components are represented as simple objects . Only a few rituals , Make it easy to create new components .

Is the difference significant ? I would say yes . our Angular The app has 21 A component , And ours Vue The app has 30 Multiple , But the latter is obviously less complicated . Vue The components are small and thin , and Angular Components grow uncontrollably , Because compared to extracting individual components into individual components , It's easier to pile more things up in a single component .

Poor performance and expansion

This may be due to our specific settings , but Angular 2 I feel very heavy . be based on Vue The application I build allocates three rebuild build processes , In the blink of an eye in the development process - When I switch the workspace to my browser , Often the page has been reloaded and rendered . our Angular 2 Applications in different , It takes a few seconds to rebuild and render . It may sound small , But remember , Any change will result in overloading the result of refreshing the source code , So it has to be done hundreds of times a day .

our Vue The application also comes with a hot load module and a reload style in development mode , and Angular The app doesn't have . Although these may be configured Angular 2 The hot loading module implements , however Vue The company's templates have configured this out of the box feature by default .

alike , And ours Vue Template rendering is out of the box AoT Rendering , and Angular2 To do this, you have to configure , And require all relevant support to be the same . The latter is actually more important - Configure your own applications to support AoT Compiling is relatively simple , It's painful to demand that all dependence be the same . It's also fueling scale expansion . The initial size of our application is already 1MB.


take Java Put back JavaScript

I'm trying to understand why the analyzer output of our application doesn't look like a flame graph , It's more like an abstract post-modern art ...

This article discusses Angular 2 Change detection strategy for :

By default , Even if we have to check every component event every time ,Angular It's very fast . It can perform thousands of checks in milliseconds . This is mainly due to Angular produce VM Friendly code .

Angular Will browser JavaScript The engine is seen as VM, Not totally different from Java. It means , Except to make the stack trace three pages long and the parser useless , The performance of a framework depends entirely on the engine it runs . Although there is only one JVM, But there are six JavaScript engine , Each has its own performance profile . I can only pray for Angular What happens is “VM friendly ” For all the code . I hope so .

And Java It's more than that . Angular Is not a JavaScript frame , It is a TypeScript frame .TypeScript Like to pretend it's safe , Because it's a strong type . It's a bit real , but TypeScript Suffering and Java Exactly the same question - It is not null Security . What's worse is , because TypeScript There are no runtime components , And there is no warning for many unsafe conversions , Language only provides the illusion of security . for example , It's very effective TypeScript Code , No warning .

private static extractAgenda(agenda: any): Agenda {
return agenda;

Terrible documents

Angular 2 It's the worst document I've ever seen in a major framework . It's sloppy , incomplete , Poorly written . For beginners , The quick start page says : Most of the documentation is for TypeScript Written by the developer , It has not been converted to JavaScript People write .


The future of front end development ?

When I was introduced to use Angular2 when , I hope it's an elegant framework , image Laravel and Django equally , Make front-end development easy and enjoyable . But what I found was an instability 、 swelling 、 Over designed framework , A lot of promises , But there are very few .

Please don't use for the sake of kindness Angular. For less than one tenth of its size Vue.js But it provides a better development experience .

Angular 2 is terrible -

[ The quilt banq On 2016-12-02 15:48 A modified ]

本文为[Jiedao jdon]所创,转载请带上原文链接,感谢

  1. Gallop workflow engine design series 01 process element design
  2. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  3. Vue Mobile Music App learning [16]: player lyrics display development
  4. jquery cookie
  5. jquery cookie
  6. 体面编码之JavaScript
  7. JavaScript for decent coding
  8. React17 系统精讲 结合TS打造旅游电商平台
  9. React17 system combined with TS to build tourism e-commerce platform
  10. 2021-05-04 hot news
  11. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  12. gRPC-Web:替代REST的gRPC的Javascript库包
  13. The relationship between httpsession object and cooike and the construction of cookie object
  14. Grpc Web: a JavaScript library package to replace rest grpc
  15. Building reactive rest API with Java - kalpa Senanayake
  16. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  17. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  18. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  19. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  20. Vue.js比jQuery更容易学习
  21. Node.js的Reactor模式 与异步编程
  22. Vue. JS is easier to learn than jQuery
  23. Reactor mode of node.js and asynchronous programming
  24. 详解JavaScript中的正则表达式
  25. Explain regular expressions in JavaScript
  26. 详解JavaScript中的正则表达式
  27. Explain regular expressions in JavaScript
  28. JS: closure
  29. Write your own promise in promises / A + specification
  30. Analysis of the core mechanism of webpack from loader, plugin to egg
  31. On the import and export of webpack
  32. Interpretation of lodash source code (2)
  33. Hexo series (5) writing articles
  34. 有人用过JMeter或用HttpUnit写过测试吗????
  35. Has anyone ever used JMeter or written tests in httpUnit????
  36. JavaScript异步编程4——Promise错误处理
  37. Leetcode 1846. Reduce and rearrange the largest element of an array
  38. JavaScript asynchronous programming 4 -- promise error handling
  39. SQLite是一种经典的无服务器Serverless
  40. 通过Spring Boot Webflux实现Reactor Kafka
  41. SQLite is a classic server less
  42. Realization of reactor Kafka through spring boot Webflux
  43. Focus on the basic knowledge of JS
  44. Node.js与Spring Boot比较? - Ryan Gleason
  45. Compare node.js with spring boot- Ryan Gleason
  46. 「HTML+CSS」自定义加载动画【049】
  47. 「HTML+CSS」自定义加载动画【048】
  48. 「HTML+CSS」--自定义加载动画【047】
  49. "HTML + CSS" custom loading animation [049]
  50. "HTML + CSS" custom loading animation [048]
  51. "HTML + CSS" -- custom loading animation [047]
  52. 使用Akka实现Reactive DDD
  53. Prototype与JQuery对比
  54. Using akka to realize reactive DDD
  55. Comparison between prototype and jquery
  56. Please elaborate the diff algorithm of Vue
  57. On the combination of ecarts and Baidu map, in the Intranet environment to develop offline map, to achieve point, line, range value.
  58. 使用Slonik框架基于Node.js和PostgreSQL处理大量数据
  59. Using slonik framework to process large amount of data based on node.js and PostgreSQL
  60. Netflix使用React制作高性能电视用户界面