EmberJS 求 Ember.js 开发经验的分享

ery · 2015年03月14日 · 最后由 hao 回复于 2015年05月04日 · 24096 次阅读
本帖已被管理员设置为精华贴

干货在下面的评论中....

最近在开发一个前台 Ember.js,后台 Rails,前后台分离的项目。 研究了几天,基本入门。 希望各位有经验的大神,分享一下你们在使用 Ember.js 的时候。 有哪些居家旅行,常用必备的组件和资料? 以及谈谈那些恶心的坑,那些宝贵的经验和吐糟。

研究的时间甚短,所以能我能分享资源也不多,如下:

官方资料

英文 http://emberjs.com/guides/ 中文 http://emberjs.cn/guides/ 英文 http://www.ember-cli.com/

文章

面向未来的前端模块化开发与包管理 http://div.io/topic/950 Angular.js VS. Ember.js http://www.csdn.net/article/1970-01-01/2816880

Demo

https://github.com/ery/emknight 前端 Ember https://github.com/ery/emcastle 后端 Rails

研究的过程中,发现 Ember 的核心成员之一,居然是 Yehuda Katz http://emberjs.com/team/ http://yehudakatz.com/ https://github.com/wycats https://twitter.com/wycats

Yehuda Katz is a member of the Ember.js, Ruby on Rails and jQuery Core Teams

当年上海 Rails 小组,曾有幸邀请过 Yehuda 来上海演讲。 我也有幸见其肉身,现在想想,遗憾未能合影。 Handlebars 就是 Yehuda 主导的。 我第一次知道他,是因为 <> http://book.douban.com/subject/2368647/ http://book.douban.com/subject/3446112/ 当时这本书对我帮助极大,JS 水平得到了提升。 书写的也非常好,一气呵成,几天就读完了。

@nightire 补充一句,EmberConf 2015 不是快来了,是已经开完了。所有演讲资料都在 这里 。BTW ng-conf 也是最近,不知道开完了没有,里面一个关于 component 的演讲挺不错。

我一般就看看 Twitter 和 Ember Weekly。一个每天了解下动态,一个每星期汇总。

我也在纠结是学 ember 还是 ng,最后肯定都要学,但是从谁下手呢?本来我已经决定先搞 ng 的了,但是麻痹人家来个 2.0 全部重写不兼容 1.x,你说我学是不学?学 1.x 学完就过时没用了,学 2.0 吧还没出来。

流行度来说 ng 比 ember 高得多得多,也是我想先学它的原因,谁知道就给你来这么一手。

#4 楼 @darkbaby123 哈哈,我本来的意思是视频快来了,没想到这次 Confreaks 动作这么快!多谢提醒

#5 楼 @blacktulip 我建议你不要都学,并且学哪个其实都不错,很难分出绝对的上下来。另外,到了如今的阶段,无论学哪一种(包括 React)其实都是去接收和习惯 Components 的思想,最终的最终大家都要回归 Javascript(框架依然有用,但是无须太多的 hacks),因此这几年就是一个过渡期,不用纠结选哪个。

#4 楼 @darkbaby123 BTW,有兴趣和精力组织 Meetup 吗?我记得你也在上海吧?

#5 楼 @blacktulip ng 1.5 会考虑和 2.0 的集成?

#7 楼 @nightire JS 本身也在变,ES6 以后会全面推行么?io.js 好像支持 es6 的,你用过哪些 es6 特性呢?

@nightire 可惜了,我在武汉,不在上海。不然跟你面谈聊聊应该挺有收获的。

@qsun 你最后的一个例子应该可以用 service 来做,数据放在 service 里,socket.io 通知 service 更新,然后 sevice 可以同时注入 dashboard 和 friend_count_check 这两个 route。

@nightire 谢谢!有时间来上海玩一定通知你。

直接来react算了,不喜勿喷~

还有一个问题是 ng 的资料比 ember 多很多,要找教程找帮助都容易得多

@blacktulip 国外资料 Ember 也不少,不管是 Google 的还是 SO 的,教程更多。不过哪个框架的教程都只对初学者有些帮助。国内就不说了,风吹过来什么种子就发什么芽。

#3 楼 @nightire 能否留个联系方式,我想和你私聊

#19 楼 @ery 抱歉比较忙,私聊就算了,就什么问题还是公开讨论更好一些。

#20 楼 @nightire 你应该认识我,像认识这个世界是如此精彩

ruby -r base64 -e 'p Base64.decode64("ZXJ5bGVpQGdtYWlsLmNvbQ==\n")'

#21 楼 @ery 是的,你已经认识我了,我在网络上留下的全是真实资料。

你有什么问题就在这里问好了,能回答的也不止是一个人或几个人,大家一起探讨何乐而不为?

要单独和我聊也无妨,但是我最近特别忙,恐怕没有时间长篇大论的。你愿意的话,发电子邮件给我好了,可是我不一定有时间回复。[email protected]

Ember CLI 文档中有这么一段话,

Ember CLI uses the ES6 Module Transpiler, which turns ES6 module syntax into AMD (RequireJS-style) modules. Using the transpiler, you can write code using tomorrow’s syntax, today.

ES6 不熟,于是搜了一下,搜到了一份资料 《ECMAScript 6 入门》阮一峰 http://www.ruanyifeng.com/blog/2014/04/ecmascript_6_primer.html http://es6.ruanyifeng.com/#docs/class

说说两个 tips

1、在 route 用使用 nested resources 时,将 path 里的 id 直接写为 model_name_id,这样就不用在 route 里再定义一次 model 的调用

this.resource('users', function () {
  this.route('detail', {path: '/:user_id'});
  this.route('edit', {path: '/:user_id/edit'});
});

2、如果要 html escape,直接用三个尖括号 {{{model.body}}}

看了看 Discourse Ember 部分的代码,学到了很多。还有作者的博客里面货也很多,http://eviltrout.com/

#7 楼 @nightire 想知道你们在实际项目中是不是用 ember-data,很喜欢它的一些特性,但是感觉对服务端的 api 要求有点过于 opinioned 了。看了 Discourse 的代码,发现他们就是用 Ember 自己的 Ember.Object,不知道你们在 model 层是怎么处理的?

#26 楼 @teddy_1004 我自己玩的项目有用,API 那边也努力按照 JSON API 的规范去写,不习惯时有发生但是总能解决。ember-data 归根结底也还是基于 Ember Object 写出来的,Discourse 没有用一是因为你说的关于主观的 API 规则;二是因为那时候 ember-data 太不成熟。

现在好多了,even 你的 API 没法去跟着它的要求走,你要可以自己写 Adapter。以前我一直觉得写 Adapter 是很莫测高深的事情,但经过了 Angular 的“锤炼”(在这方面 Angular 更糟糕,只有相对更低层的 ngResource 可用,data 层都是要靠人写的;当然也有一些 3rd party 的模块可用,不过 opinioned 的影响也是一样的),再加上 ember-cli 的友好,现在觉得小菜一碟。

所以简单滴说:长远利益跟着 JSON API(或其他)规范你的 API,ember-data 就可以开箱即用;要么搞定 Adapter 让它为我所用(或者有符合你 API 的靠谱的 3rd party adapter)。

推荐一篇文章给你:http://blog.yodersolutions.com/using-ember-data-with-asp-net-web-api/

虽然不知道是否和你遇到的格式问题类似,但是解决方法的思路描写的很清楚。

另外,ember-data 其实是一个很难的项目(前端领域),它走了不少弯路,看它艰难的 v1 之路就知道了,想要用的话就一定得有自己搞定很多“坑”的心理准备和技术储备!还好,貌似 ember-data 终于走上正轨了,期待 12th June 的 v1 吧。

#29 楼 @nightire ember 应该吸收你做宣传大使... 这两天我在从头学 ng 1.x,首先我找了个视频教程过了一遍,然后按官网 tutorial 敲了一遍,现在正在敲 http://angular-rails.com ,基本上摸到了一些门路,你说的不错,ng 的结构异常散乱,或者说根本没有结构。敲完现在这个我打算看看 ember 比较一下,请问能否推荐一下类似的教程,就是像 ng 的官网教程那样一步一步带着敲出一个 app 来那种。

http://gihyo.jp/dev/serial/01/emberjs/0001 这个 ember 入门讲解相对比较完整点,是个日本人写的。

#28 楼 @nightire 多谢这么细致的回复,受益匪浅。估计是我写的项目比较小,再加上后端 API 不是我写的,没有利用到太多 ember-data 的特性,反倒是要自己重写一堆 adapter 和 serializer 搞得有点郁闷。我也还是对 ember-data 挺期待的,尤其是可以在 Ember Inspector 结合觉得调试超级方便 😄

#30 楼 @blacktulip 官方的:http://guides.emberjs.com/v1.10.0/getting-started/ CodeSchool 的:https://www.codeschool.com/courses/warming-up-with-ember-js 以及 https://www.codeschool.com/screencasts/soup-to-bits-warming-up-with-ember

由于过去两年,Ember 的演进非常之快,API 的变化也比较频繁,所以坦率地说至少目前 Ember 还处在“折腾”的阶段。不过我相信在六月十二日之后一切都会稳定下来。而在此之前,Ember 的教程绝对不少,只是因为框架本身演进太快使得很多教程太容易被过时。

我个人的感受是,Ember 是一个值得学习的框架,耐心的把 Guide 吃透,然后在实践的时候时时刻刻看一下用到的 API 最新文档,这样会扎实的多,以后不管遇到什么教程都能云淡风轻了。

#29 楼 @nightire 感谢大神的有料吐槽!总结一下,ember.js 和 angular.js 的区别就是一个是开火车一个是开汽车的区别,对吧?

#32 楼 @teddy_1004

adapter 和 serializer 的套路都是一样的,关键是 API 的设计,如果 API 设计本身就很差,你以为用 Angular 的体验就会好到哪里去么?我倒不是鄙视谁,我只是觉得前后应该是一体的,API 的设计和实现不能只是后端的人说了算,作为 API 的直接使用者,如果前端在 API 的设计实现上没有发言权,那这个团队是有些问题的。

去年尝试在新项目中使用 angular,写了一版 DEMO 后放弃了,最终选用了 ember.js。 原因:

  1. ember 项目的架构很清晰 controller、model、route,template,让熟悉 rails 的人分外亲切。
  2. ember-cli 很好用! code generate, js/css compile 都一键搞定,用 angualr.js 时还要自己配置 gulp/grunt. 而且 ember-cli 已经正式合并到 ember 项目里,成为官方推荐。
  3. ember inspector 很好用! chrome/firefox 插件支持,调试利器,angular 找了很久没有好用的插件。
  4. ember-addon 很好用! 很多常用需求都有 addon 支持,越来越有使用 gem 的感觉了。

话说,我稍微看了一下 ember 的结构,感觉这层数有点太多了,首先是网页上直接有 template,然后上面有 view,再往上是 controller,再上去是 route,后面还有 model,特别这个 controller 和 route 好像有些逻辑写哪个里面都可以一样,这两个怎么分工呢?

#38 楼 @ery 你可以参考一下我最近做的 DEMO,
https://github.com/foxzool/deyeen-api https://github.com/foxzool/deyeen-webapp api 使用 grape + JSONAPI, doorkeeper 提供 oauth2 provider web 端使用 semantic-ui 做界面,用 simple-auth 插件登陆验证

#39 楼 @blacktulip view 这块在 ember2.0 都会由 compoent 来代替。 controller 和 route 区别,说说我的理解,大家交流一下。

1、route 是准备页面数据的地方,在这里可以根据 url 的 params 查询数据,然后放到 controller 的 model 里。

2、controller 里对获取的 model 数据进行进一步的处理后 render 到 template 显示,比如说要对列表数据进行过滤排序,都是在 controller 进行的。

3、ember 的 action 有 popup 的机制,比如说在/posts/new 这个页面上进行调用'save',会先去 controller/posts/new 找,然后去 routes/posts/new、routes/posts、routes/application 进行查找。 所以说,如果你有个 action,比如是‘return-to-post-index',返回文章列表页面,那么可以在 routes/posts 这个路由上进行设置,然后在/posts/下面的所有页面都可以调用'cancel'这个 action,ember 会自动找到 action 定义。当然,可以在 popup 过程中通过 return false 在中断查询,达到自定义的目的

@nightire @foxzool @ery 刚学习 ember,看完了资料,想亲自动手做一个,但是在界面布局上,不知如何入手,按传统的 rails,把通用部分放在 layout/application,如果有两个不同的 layout,比如前台,后台,可以是 layout/application,layout/admin,在 ember 应该要如何?

#43 楼 @stephen 我采用的是前后端分离的方式,不是传统的 rails,所以木有 layout,也不需要

@ery 我也是前后端分离,但是也需要 layout 吧,比如公用的 html,怎么处理呢?

#43 楼 @stephen 关键词:outlet

其实如果是我的话,我也可能把前后台分割成两个 Ember App(代码不一定要分开,应用可以是多个),所谓前后分离有时候也不单单是“前”与“后”分离,更可以是“前”“前”分离。总之分离式架构更加灵活,像你的这个情况可以有多种方式实现的。

@darkbaby123 非常感谢。一看 route 就是 rails 的 controller 我一下就感觉清楚了好多。请问什么地方能找到 2.0 的学习内容呢?我知道还没出,不过想看看具体的变更预报和例子等。

@blacktulip The Road to Ember 2.0 是一个总览型的 RFC。部分特性的细节还在另外开 RFC 讨论,比如 Routeable Components RFC

#26 楼 @teddy_1004 @nightire Discourse 没有用 Ember-data 是因为那时候 Ember-data 官方强烈建议不要使用。能迁移肯定会迁移过去的,不过要花很长时间。可以看到 active_model_serializers 0.10 就会按照 JSON:API 标准来序列化对象了。而 Discourse 这现在只好用老版本。

干货全在楼上诸位的评论中。

#29 楼 @nightire 艾玛您的每一个回复都值得好好读 3 遍,感谢您的无私分享!

@nightire 我新建立一个项目,frontend,我使用 addons 安装 bootstrap-sass,出现 not found http://localhost:4200/assets/frontend.css,感觉好多坑!

#54 楼 @stephen 重启过 ember 么?

#54 楼 @stephen 这种问题就别找我了,我解决不来,太高级。

此贴的回复如此流弊~~~

@foxzool 重启了,应该是用了 sass 的原因,用了 sass 它会自动生成 app.scss,而原来的所需要的 frontend.css 就没了,所以把 index.html 的引用也要删除。@nightire 看你的回答都这么高级,高级问题当然找你拉!

https://github.com/lujiajing1126/ember-example

很久之前写的东西,一个 demo,部分用了 emberscript

ember 中文社区的 demo 也开源了吧,叫做 intimi

https://github.com/emberjs-cn/intimi

总结了一份 emberjs 的参考资料, https://github.com/astray1988/emberjs-reference

酷炫,前后短分离啊

关注这个话题的筒子们可以移步看看我正在写的一篇东西:http://div.io/topic/950,然后你们就大概可以了解:

为了让 Angular 1.x 的前端工程能做到像 Ember CLI 现在能做到的(还不是全部)要费多大的功夫吧……

#62 楼 @reducm 我去。。你这个真是火爆啊!

66 楼 已删除
67 楼 已删除
68 楼 已删除

#28 楼 @nightire 深读大神评论,回头看自己的水文,同感 angular1.x“丫是一套让你实现一个框架的工具集!”

有意思的贴 @reducm 佩服

还有个这个 https://github.com/bustlelabs/ember-restless 估计是 ember-data 嫌重,他们这个似乎轻 http://www.bustle.com

我没怎么用 ember,知道,官网的 guide 写得相当有营养。最近他们说 v2 要放弃 IE8 了,让我不禁有点失望,很明显他们所谓的“听到的大家的声音”没这边的。。。还好 v1 会继续支持 ie8, so they say。

国内 IE8 应该不少吧还,有知识的请赐教,我好像看哪里统计还不少。

nightire [Tips on Ember 2] UI 布局与应用状态的关系处理 提及了此话题。 10月17日 16:32
需要 登录 后方可回复, 如果你还没有账号请 注册新账号