全文共2892字,预计学习时长8分钟

图源:technoloader

说真的,Angular真的不似React开发人员说得那么差劲,只是我们常常服从于脑海中已有的偏见。对于门外汉来说,Angular看起来既庞大又复杂。但很多人没有意识到的是,它背后使用的编程语言都是JavaScript,主要区别在于建构方式的不同。

Angular本身并没有那么差劲。如果你真的那么想了,那多半是由于尚未了解前笼罩的刻板印象。对Angular的评价之所以褒贬不一,是因为无论是它的外观还是工作方式都与你习惯的有所不同。又或者是你自身存在的知识局限,让Angular没有按照你的要求运行。

我是一名Angular开发人员,但并非因为它是我的首选本地框架就推荐它。如果你正在寻找一种以Angular为基座的React部件,它不合适。这是一个讨论部件,它超越了代码的细微差别,而且是“x比y更好”之类的东西。它是一个元视角,聚焦代码、功能以及在我们使用Angular作为工具的能力范围中,Angular所处的位置。

全是JavaScript

与Web和前端相关的一切基础都是JavaScript。无论你是使用React,Angular,Vue,jQuery,Ajax还是Node,它们都是JavaScript的一种形式。

图源:beansmile

这个行业面临的问题是,许多新手和过渡中的开发人员经常会使用JavaScript,但却从未好好学习过它。部分原因是由于JavaScript很容易上手,无需复杂的设置,也无需结构实现或导出编译,你只需创建一些代码,大多数情况下它就可以正常工作。它是一种经过设计的脚本语言,在运行时就能进行编译和解释。

这常常给许多开发人员一种已经掌握了这种语言的错觉,导致他们在没有该语言背景知识的情况下直接进入库和框架。拥有计算机科学学位并不能将你从JavaScript中拯救出来,只有学习JavaScript才能让你战胜它。

事实上,JavaScript并没有那么糟糕。它设计得很简单,这也是网景(NetScape)的部分吸引力所在(网景这个名字能让人联想到为什么90年代会出现那么多随机的雪花和低劣的页面效果)。在苹果禁止Flash应用的推动下,JavaScript加速了占领Web的步伐。

但是随着项目规模的扩大和需求数量的增加,为了适应日益复杂的在线世界,我们今天所熟知和喜爱的框架和库成为了日益增加的代码管理问题的解决方案。Angular就是其中之一。在谷歌的支持下,它演变成我们今天熟知的框架。

万物皆有自己的位置和目的

与React等库有很大不同,Angular是一个框架。人们经常比较Angular和React,但由于二者存在的原因以及构建的方式都不相同,对比时很难做到公平公正。

图源:unsplash

框架是库的集合,通过界面进行协调,从而更容易地利用库提供的特性和功能,这一过程是通过框架的沟通方法以及框架自身构建的方式来实现统一。

以Angular为例,它便是以体系化的结构组件为基础,这意味着Angular更偏好抽象为单个功能或逻辑组件的分解代码设计。这些组件界限分明,具有各自明确的方法、事件和属性。它利用了JavaScript的面向对象思想,并采用了TypeScript的类型定义形式。

React是一个前端接口库,用于管理屏幕上信息的“绘制”。除了JSX语法之外没有强制的体系结构或设计模式,决定权主要留给了开发人员。

因此,Angular通常被视为一种“刚性”框架。你几乎可以在任何地方随意地添加一段React代码,相比之下,Angular则需要一些设置。但随着刚性的增强,它具有一定的优势,特别是在应用程序的增长和团队要求一致,以结构化的方式不断前进时。Angular使项目具有可预测性,开发人员能够在项目之间实现无缝衔接。

微前端和反向架构

Angular通常被视为一个整体项目,不适用于过渡性应用程序。但这主要是由于常见的入门教程都是从头开始创建应用程序,与Angular的微前端存在差距。

什么是微前端?

应用程序是由无数个多重技术、框架和库组成的。这种情况时有发生,特别是在准备升级但没有足够人力或预算从头开始创建整个系统的遗留系统中。已经有了一个将所有部件都连接在一起的基础框架,这可能是Angular框架,也可能是其他类型的框架。

如果是其他类型的框架,Angular可以通过Angular Elements,以紧凑而包容的方式与之匹配。Angular Elements也被称为“Web组件”或自定义元素。通过这种方法,可以创建与框架无关的打包代码片段,这些代码片段可以用于传统Angular结构之外。

最终结果可以直接出现在页面中,并在需要时与应用程序的其他部分保持独立,你几乎可以把它想象成一个位于另一个应用程序中的迷你Angular应用程序。它可能是React,也可能是Vue,甚至可能是Java Spring的化身或基于PHP的应用程序。

有何重要性?

这意味着,如果Angular是你在过渡项目中要走的路线,那么就需要把各个部分拆开,再重新组合在一起。它的模块化设计使它可以与应用程序的其他部分保持独立,或者集成到完全过渡的Angular应用程序中。这可以节省团队的时间,也不需要重构架构设计。

使用Angular的成本

图源:unsplash

使用Angular的主要成本是一条学习曲线,特别是如果你不是原生JavaScript的开发人员,或者对vanilla JavaScript不够了解。这就是Angular最终的指向——vanilla JavaScript,一种没有附加功能、没有架构和模式强制的JavaScript。

如果你理解了vanilla JavaScript的工作原理,它混合了一些创造性的结构化模式,那么理解Angular会更容易也更快。TypeScript只是看起来更容易使用并践行了面向对象的思想,而这些思想在JavaScript中还无法实现。

无论如何,你都无法避开vanilla JavaScript。在web前端开发领域中,无论你走到哪里,它都会一直存在。

因此,如果你认为Angular很差劲,那就应该先退一步,去看看vanilla JavaScript,只有这样你才能真正理解这个框架的实现,以及其实现可扩展性、代码控制与协调的意图。偏见常常源于不了解和先入为主的臆想,Angular真的没有那么差劲!

一起分享AI学习与发展的干货

欢迎关注全平台AI垂类自媒体 “读芯术”

(添加小编微信:dxsxbb,加入读者圈,一起讨论最新鲜的人工智能科技哦~)

Angular真有React开发人员讲得那么差劲?相关推荐

  1. 为Angular(2+)开发人员提供带TypeScript的Vue.js

    目录 介绍 单页应用程序的演变(SPA) 三大框架概述 Angular开发者的Vue.js 学习Vue.js Vue.js页面的剖析 构建示例应用程序 TypeScript的案例 入门--Vue.js ...

  2. react项目开发步骤_成为专业React开发人员的31个步骤

    react项目开发步骤 我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...

  3. react和react2_为什么React16是React开发人员的福气

    react和react2 by Harsh Makadia 通过苛刻马卡迪亚 为什么React16是React开发人员的福气 (Why React16 is a blessing to React d ...

  4. react开发_我如何在#100DaysOfCode挑战期间找到React开发人员的工作

    react开发 by Danny Huang 黄丹妮 我如何在#100DaysOfCode挑战期间找到React开发人员的工作 (How I landed a React developer job ...

  5. 各大IT公司笔试真题汇总开发人员一定要加入收藏夹的网站(收藏)

    巨人网络java笔试基础题分享 http://www.coderarea.net/bbs/read.php?tid=834 百度笔试题 http://www.coderarea.net/bbs/rea ...

  6. react.js开发_2020 React.js开发人员路线图

    react.js开发 成为阅读JS开发人员的插图指南,其中包含相关课程的链接 React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一. 在Faceboo ...

  7. 如何成为一名Web前端开发人员?入行学习完整指南

    经过如此多的试验和测试,而不是说你从头开始创建了所有内容,接着,你在网页上创建了第一个登录表单时,你感觉如何? 经过了多次更改后,将布局分配给第一个Web应用程序时感觉如何? 当成功处理了数千个用户的 ...

  8. 中级前端笔试_在短短8个月内如何获得中级前端开发人员的角色

    中级前端笔试 by Matthew Burfield 通过马修·伯菲尔德(Matthew Burfield) 在短短8个月内如何获得中级前端开发人员的角色 (How I got a mid-level ...

  9. react的导出是怎么实现的_22 个让 React 开发更高效更有趣的工具

    英文 | https://dev.to/jsmanifest/22-miraculous-tools-for-react-developers-in-2019-4i46翻译 | https://www ...

最新文章

  1. Python模块与类
  2. php alert 乱码
  3. Qt C++属性类型提供给 QML调用(二)
  4. 介绍10个常用的Python内置函数,99.99%的人都在用!
  5. 洛谷 - P2766 最长不下降子序列问题(最大流+动态规划+思维建边)
  6. h710阵列卡支持最大硬盘_DELL服务器RAID磁盘阵列在线扩容(以H710P阵列卡为例)
  7. DPDK如何释放大页内存(巨页内存hugepage)
  8. php 数据映射,数据映射模式(Data Mapper)
  9. IDEA下项目打包成jar,并通过cmd命令调用
  10. angularjs java 实例_[Java教程]angularjs小练习(分别通过ng
  11. 切换google的公共库缓解网站访问慢的问题
  12. AMS1117 稳压芯片原理图实物管脚图以及接法
  13. 估值过能预市下行风险
  14. 腾讯校园招聘历年经典面试题汇总:前端
  15. 恒瑞、百济之外,再鼎开辟了中国医药创新又一极
  16. Code、 RO-data=、 RW-data、ZI-data、
  17. feded计算机音乐,Romeo And Jazzie/Alan Walker《Faded Refix》[FLAC/MP3-320K]
  18. #发现你#桃子还是苹果——沉锚效应
  19. 大数据Hadoop等大数据架构学习
  20. 仓库管理如何实现扫码出入库?

热门文章

  1. 如何 repack 一个RPM包
  2. 新生儿的二类(自费)疫苗(截止2019年)
  3. AI背景下的新零售行业商业模式
  4. 病毒防治:清除***从它的寄生地开始
  5. valid ready协议学习
  6. 【Pytorch with fastai】第 11 章 :使用 fastai 的中级 API 进行数据处理
  7. html双引号打不正确,双引号要占一个空格吗 为什么打双引号要空格一下才能出来...
  8. matlab绘制布尔运算图,干货丨最全的布尔运算制作小图标教程!
  9. 逆波兰式是什么(以及dc计算器如何使用)
  10. 朋友圈加粗字体数字_报名 | 零基础入门brush lettering英文花式字体