瞎扯淡 NG 会抢 Rails 的饭碗成为明日之星么?

chenge · 2013年06月01日 · 最后由 huobazi 回复于 2014年09月10日 · 7478 次阅读

现在有一个向前运动的趋势 [ http://todomvc.com ],其中 NG 是一个比较先进的框架。

NG + api 会否成为未来的主流呢?api 可以用 rails 或者 node、php 实现。

这样将大为简化 rails,只用 route,controller,AR 等部分。不用 view 和费解的 assets,甚至完全实现 c/s 的解耦。

元方,怎么看?

先用起来,然后才有可能成为明日之星麽。

有它的适用场景,我觉得大多数的网站用 rails 就足够了。

前端化是大趋势,angular 搭上了这艘顺风船……说起来么,与时俱进的都不会被淘汰,被淘汰的只有陈腐守旧者

NG 到底是什么框架?

就算是完全用 angular 写,你也还得写 template 啊,那么 rails 的 view 还是要的,毕竟手写 html 什么的太特么反人类了……另外不用 assets 难道不用 css 么

后端只提供业务方法 api 和数据存储

#5 楼 @aptx4869 前端的自动化构建一点都不比 rails 的 assets pipeline 差,可以参见 grunt 等类似的工具

HTML -> haml, jade, handlebars, eco... CSS -> Sass, Less, Stylus... Javascript -> Coffee

Angular 本身就是 MVC 框架,view 对它来说是很普遍的事情

@chenge 所说的 C/S 完全分离一点都不是梦想,我们现在的项目已经在这么做了,基于 Java 的后台,只负责业务逻辑和 API,前端用的是 Ember.js,就好像两个项目分开做一样。最大的好处就是一套业务后台,我可以方便的实现 N 个应用,就看你把后台的业务覆盖面如何设计了。

不过说到 NG 一家独大,呵呵……至少 Ember 就不同意。而且也不会影响到 Rails 什么,毕竟需要完全分离的项目是少数,在这个趋势还未成气候之前,我们还有很长的路要走。

#7 楼 @nightire 像这样三行东西我不觉得纯前端写起来会很方便:

= ng_form_for User.new do |f|
  = f.input :name
  = f.input :email
  = f.button :submit

NB 这个框架才很厉害。

#8 楼 @aptx4869

http://emblemjs.com/syntax/

你自己看吧,用来写 Ember.js 的 Emblem 模板语法,几乎完全复刻 slim。这就是用在纯前端的,当然也可以嵌套在 Rails 这样的后端框架里使用。

别太局限自己的眼界啊。

#8 楼 @aptx4869

至于你说的那几行,创建新用户的表单,用 form helper 输出结果。Angular 我不熟,不过 Ember 里反而更简单(搭配 Emblem 简化语法)

form submit="createNewUser"
  input value=name
  input value=email
  button Submit

BTW,我并无意非要和别的东西比个高低,新的技术总有优势也总有要改善的地方,并不是说纯前端就一定胜过后端 + 前端 MVC,反之也不完全成立。总之,在认定 A 一定不如 B 之前,还是花点时间和心思多了解一下 A 会比较好。

我现在挺看好 angular 的,全部按照它的思路的话,客户端逻辑只维护数据更新就行了,页面完全自更新。emberjs 的文档有点长还没看,不知道它的数据绑定有没有这么方便。

目前我尝试用 ujs 做 ajax 逻辑,简单的页面更新是方便,交互复杂的部分就很吃力,这时候就需要客户端框架。

再考虑到离线应用的话,只能用 js,所以还是需要客户端框架。抢饭碗我不觉得,我继续用 Rails 做后端的粘合剂。

ember 可以用 emblem 模板,angular 不能

angular 有依赖注入这种东西在,不好控制生命周期,和 jquery mobile 等兼容性不好

discourse 用 ember, 不过 angular star 数多 40% 左右

ember 让人担心的地方就是有 yehuda 在... 每次 yehuda 想重构什么东西的时候你们懂的...

#11 楼 @nightire 哟,满满的优越感……随便一个语法简答的模板引擎就能满足你了?非要我把生成的 html 帖出来比较么 源码:

= ng_form_for(User.new, controller: 'RegistrationNewCtrl') do |f|
    = f.input :user_name, placeholder: '输入你的用户名'
    = f.input :email, placeholder: '[email protected]'
    = f.input :password, placeholder: '长度在6位以上'
    = f.input :password_confirmation, placeholder: '确认密码'
    = f.button '注册'
<form accept-charset="UTF-8" action="/users" class="simple_form new_user" data-ng-controller="RegistrationNewCtrl" data-ng-submit="submit()" id="new_user" method="post" name="form" novalidate="novalidate">
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" />
    </div>
    <div class="control-group string required user_user_name"><label class="string required control-label" for="user_user_name"><abbr title="required">*</abbr>
            用户名</label>
        <div class="controls"><input class="string required" data-ng-model="user.user_name" id="user_user_name" name="user[user_name]" placeholder="输入你的用户名" type="text" />
            <p class="help-block">{{errors.user_name}}</p>
        </div>
    </div>
    <div class="control-group email optional user_email"><label class="email optional control-label" for="user_email">Email</label>
        <div class="controls"><input class="string email optional" data-ng-model="user.email" id="user_email" name="user[email]" placeholder="[email protected]" type="email" value="" />
            <p class="help-block">{{errors.email}}</p>
        </div>
    </div>
    <div class="control-group password optional user_password"><label class="password optional control-label" for="user_password">密码</label>
        <div class="controls"><input class="password optional" data-ng-model="user.password" id="user_password" name="user[password]" placeholder="长度在6位以上" type="password" />
            <p class="help-block">{{errors.password}}</p>
        </div>
    </div>
    <div class="control-group password optional user_password_confirmation"><label class="password optional control-label" for="user_password_confirmation">确认密码</label>
        <div class="controls"><input class="password optional" data-ng-model="user.password_confirmation" id="user_password_confirmation" name="user[password_confirmation]" placeholder="确认密码" type="password" />
            <p class="help-block">{{errors.password_confirmation}}</p>
        </div>
    </div>
    <div class="btn" data-ng-click="submit()" data-ng-disabled="form.$invalid">注册</div>
</form>

这玩意在我写完ng_form_for这 helper 之前,本来就是用 slim 手写的,重复得都想吐,同学你可以试着用 Emblem 重写一遍

15 楼 已删除

#14 楼 @aptx4869 大哥,我都说了无意比较什么,Ember 和 Angular 不见得谁就比谁更优越几分,这道理我想谁都能懂。

你那 ng_form_for 是个 helper 好吗?你以为 Ember 就不能写 helper 吗?Handlebars 作为 Ember 内置的模板系统,写类似的 helper 又不是多难的事情,去看看 discourse 的源码,你以为这样的 helper 就只有用 Angular 能做到吗?emblem 也有用于 rails 的 gem,重现你这个 helper 并不是只有一条路可走。

还是那句话,在认为 A 一定没有 B 好之前,还是去了解一下 A 吧。

#16 楼 @nightire So, what's your point then? You are now useing some pure front-ended helper which is written in javascript that are better than Rails helper which is written in ruby? Ok, If you have something better, just show us the code, please.

PS.说了半天你怎么知道我就没看过那点东西呢?我会告诉你我最后选 angular 没选 ember 的原因之一就是看了 discourse 那些一坨坨的玩意被吓到了么……

你们要写 c/s 客户端吗?

個人淺見,http://deployd.com 像這種東西以後有可能會是後端的方向,讓視覺層與後端完全分離,WEB 就提供一套 Web 用的 API 再搭配 Angular 等喜歡的框架來使用就好

哇,好久不关注 emberjs 了,居然现在有 emblem,以前玩的时候还用双括号呢 汗!

#19 楼 @gogojimmy 专业化的 api,这个是比较新,似乎是提供了一些服务。好像不支持 mysql?

你们 NG 说的是啥?angularjs 么?

#23 楼 @coolzilj 前不久是看到这个 noback,原来就是 api 化,包括这个 deployd。看来就是前后分离专业分工。

任何封装都会损失性能和灵活性 angular 和 emberjs 这种做法有点像.NET、delphi 中的数据感知控件(data-aware),做原型和供初学者把玩的,真的用在产品中会被骂的。谁能科普一下这样的优点? 前后段分离只是 ajax 交互的问题,直接写 js 所有控制点都可以灵活处理。

大家也不用太害怕 Angular 吧,畢竟前端 MVC 這樣的特性是因為 WebAPP 的產品越來越多,這種產品為了使用上的體驗因此需要像是 Angular 這樣的 Framework 來支持,但目前絕大部分都還只是在用 jQuery 套套動態效果而已,如果那種東西要用 Angular 來做是會死人的,所以他們瞄向的產品特性不同,別太擔心

#22 楼 @aisensiy 看 angularjs 的 logo 就明白了...

#27 楼 @luikore 哦 是唉~ 谢谢提醒

最近在学 Ember JS。对 Angular JS 还是不很喜欢。仅是个人观点。

ember 就是有点超大了... TIL 如果只是绑定下数据的话,用超小的 http://rivetsjs.com 就够了...

匿名 #31 2013年06月02日

#14 楼 @aptx4869 请教,你是怎么给 input 加上 required 的,以配合 data-ng-disabled="form.$invalid" 来操作?不知是否可以分享下这个 ng_form_for 的 helper,我在此处卡壳许久了

@luikore 恰恰因为有 yehuda 在,我更看好 Emberjs。 最让人遐想的是某一天会有快速移植到移动端的方案。

#14 可以在后端生成好 html 第一次请求的时候返回给前端嘛,没说前端话后端的 view 就完全不用,呵呵

#31 楼 @ronbin 那个 required 应该是 simple_form 加的,我都没动它…… 其实那 helper 没干啥特别的,只是用 simple_form 的 custom form builder 的功能,直接将后端模型塞入到相应的options[:input_html]['data-ng-model']里面而已,写的很难看很罗嗦,但整个全部不到 50 行,所以真的是很简单的……那个 data-ng-disable 只是简单的覆盖掉 form builder 原来的 button……

def button(name, options={})
  options[:class] ||= ''
  options[:class] += ' btn'
  options[:class].sub!(/^\s+/, '')

  content_tag(:div, name, options.merge(
    'data-ng-click' => 'submit()',
    'data-ng-disabled' => 'form.$invalid'
  ))
end

#19 楼 @gogojimmy 似乎还不成熟,hello-world 例子,dpd -d 没有反应

#35 楼 @chenge 其实还有个类似的 firebase,官方有提供 ng 的 service 据说是实时的

#36 楼 @aptx4869 略微了解了,还没有太明白如何用。实时是说很快么?那个 nobackend 有一个列表,七八个方案吧。

ember 缺乏 ng 入门前期的刺激点,但其实 ng 深入之后发现一点都不容易。这一点来看,不如 ember 平滑。所以我选择 ember。

39 楼 已删除
40 楼 已删除

#37 楼 @chenge 现在大概有两类解决方案,一类是 BASS,像 Backlift, Firebase 这些云端服务,一类可以自己部署,像 Hoodie, Deployd。实时应该是说数据可以实时同步吧,像 socket.io,Firebase 用起来就好像是 Mongodb + socket.io

#41 楼 @coolzilj 云服务在国内很不现实,backlift 就非常慢。

#42 楼 @chenge 云服务的话作为生产项目确实不实际,不过用来做自己的 side project 挺好的,省力省心

都是 ember 与 angular 了,无视 backbone 了?

看了下 github.com 的粉丝数,backbone : angular : ember 为:100 : 71 : 50,三巨头挺厉害的

还是觉得 backbone 实在

Google 半天都搜不到 ng 是什么。可见....

#47 楼 @hardywu 你要搜 angular 吧,ng 是个简写。

#48 楼 @chenge 一年回来,发现 angular 果然有前途。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号