react or angular ?

这两天花了很长时间分别初步研究了这两个框架,我是本着一颗想做mobile web小需求的心去学习这两个我几乎完全没有接触过的框架的,毕竟前端对我来说有太多知识需要更新了。

第一天,听说 react 最近趋势比较火,在知乎或者社区上看到讨论react的大部分都非常有理有据地赞赏它,并且很多地方都提到了 react+redux+webpack 组合使用体验非常好,于是第一天搜集了各种各样如何使用这个搭配制作入门实例,并且能够完成项目部署以满足我使用less、实现页面路由等简单需求,至于数据处理方面涉及到后端服务搭建,所以暂时不考虑实现。当然,我找到了github上很多例子。有最最基础教你用webpack打包只为了写个hello world的,有大而全的实现了路由功能、还包含整个项目开发和部署环境建设、项目文件多到令人眼花缭乱的。然后我懵了,我会写hello world这没问题,但是我好像从那一堆文件里没法找到页面路由配置、less处理配置、模板分离结构等等,我知道react支持在js文件里写jsx,但是我总是有点洁癖,无论如何控制逻辑和模板不可能放同一个文件里吧?网上那一堆文章,各种《1小时学会react+webpack入门》这些文章要么太浅显,够不到项目级的开发部署的层次,要么就是教你npm install一堆工具然后你并不知道怎么把它们整合起来。

太难了,我研究了半天最后得出的结论就是这样。我花了半天的时间去看代码去跟教程,最后在我自己的项目目录里面依然除了一个hello world以外空空如也。我不知道怎么调试webpack让它调用less-loader, babel-loader成为我的开发环境,我也不知道基本的开发目录应该长什么样,我该把index.html放在src目录里呢还是放在输出目录dist里?jsx模板到底应该写在哪?到底它说的组件化需要细化到什么粒度?我很不想承认自己学不会这个框架,但是最后我的挫败感太强烈了,因为我一句代码也写不出来,只觉得心好累。 我有点怀疑我以前学的前端mvc那都是些什么玩意,放到react上完全做不到触类旁通,太苦恼了!这个时候的我跟个从来没学过前端的傻瓜一样,不知所措,无从下手。我在想这样的框架要是没有一个明白人包教会,那些刚入行的新人们该怎么办。当然也有可能是我多虑了,也许是我天分不够呗。
最后对于react的学习算是不了了之。

第二天,我本来由于前一天的受打击,不想再考虑写代码的,但是悬在心里的需求一直催着我尽快找一个方法实现。我差点没想用php+jq直接写。思考良久,我决定试水一下 angular2
以前工作时我是接触过angular1.x的,还维护过一个angular的项目,感觉还是很容易看懂,不过貌似2.0和1.0版本差别巨大,性能上下了很大功夫去改进吧,我实际上并没有报很大的期望,就打算像react一样花个半天时间研究研究吧。

找了中文网上的angular入门,和一篇比较新的16年的教程文章,跟着下了一个 angular-cli。原来有脚手架工作平台的感觉就是不一样,当我不再纠结于用什么server、配置什么webpack loader、看控制台报错不知道怎么改的时候简直太轻松了。
我要整一个项目,打一句 ng new 就完成了一个项目环境的搭建,进目录运行一句 ng serve 就能启动一个服务器,浏览器里就看到了开始跑着的project。我都不需要知道 typescript 是什么,只要照着它给我的示例,把component逻辑和html模板分开写就行了。我要做一个表单页面,只要运行一句 ng g component 。数据绑定可以照着文档中的写 ngModel ,页面交互可以绑定 ngSubmit, ngClick 等事件,路由配置可以参照文档中路由引入方式 import { RouterModule, Routes } from '@angular/router' 等步骤完成。我还可以用一个现成的挺好看的ng2组件 angular-material2做表单交互……

照着官方文档里的教程,我竟然磕磕绊绊写出来3、4个页面,能控制表单,能获取数据,能交互跳转正确路由。
这一天的感受和前一天真是大相径庭。这一天我过得相当有成就感,感觉自己有了似乎能够写出来整个项目的自信心。

说到 react 对比 angular,我或许没什么发言权,我对它们框架内部实现原理不甚了解。我并不能根据自己作为新手入门的简单程度去评判这两个框架的优劣,作为有脚手架快速建站工具的angular显然在我这新手眼里更胜一筹。但我只是想做一个简单的web app啊,什么性能什么优化我并不想考虑那么多,总得让我知道第一步该怎么去做吧。

不过两天下来,对angular的项目实现有一定了解之后,再去看react的复杂项目demo,似乎也能理解很多了,不再是像之前那样一头雾水,大概对我来说,边做边学才是最快的学习模式吧。

明天继续完善angular页面,然后再回头看看react项目,希望这次可以对react有所斩获。

本文作者: Virola