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

chenge · 发布于 2013年6月01日 · 最后由 huobazi 回复于 2014年9月10日 · 5468 次阅读
4215

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

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

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

元方,怎么看?

共收到 50 条回复
202

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

64

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

2575

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

96

NG到底是什么框架?

96

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

4508

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

1573

#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 什么,毕竟需要完全分离的项目是少数,在这个趋势还未成气候之前,我们还有很长的路要走。

96

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

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

NB这个框架才很厉害。

1573

#8楼 @aptx4869

http://emblemjs.com/syntax/

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

别太局限自己的眼界啊。

1573

#8楼 @aptx4869

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

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

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

1

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

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

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

2880

ember 可以用 emblem 模板, angular 不能

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

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

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

96

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

= ng_form_for(User.new, controller: 'RegistrationNewCtrl') do |f|
    = f.input :user_name, placeholder: '输入你的用户名'
    = f.input :email, placeholder: 'foo@bar.com'
    = 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="foo@bar.com" 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楼 已删除
1573

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

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

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

96

#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那些一坨坨的玩意被吓到了么……

96

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

96

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

3221

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

4215

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

96

你们 NG 说的是啥? angularjs 么?

4215

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

96

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

96

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

2880

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

96

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

3253

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

2880

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

96

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

96

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

96

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

96

#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
4215

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

96

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

4215

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

328

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

39楼 已删除
40楼 已删除
425

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

4215

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

425

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

1164

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

2107

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

96

还是觉得backbone实在

3435

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

4215

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

3435

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

15

一年啦

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