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

ery · 2015年03月14日 · 最后由 hao 回复于 2015年05月04日 · 19178 次阅读
本帖已被设为精华帖!

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

最近在开发一个前台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

共收到 67 条回复

研究的过程中,发现 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 是的,你已经认识我了,我在网络上留下的全是真实资料。

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

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

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-cli 的书 https://leanpub.com/ember-cli-101

话说,我稍微看了一下 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应该不少吧还,有知识的请赐教,我好像看哪里统计还不少。

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