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

ery · March 14, 2015 · Last by hao replied at May 04, 2015 · 24116 hits
Topic has been selected as the excellent topic by the admin.

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

最近在开发一个前台 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-cli 的书 https://leanpub.com/ember-cli-101

我做了一个 Demo

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

话说,我稍微看了一下 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 Floor has deleted
67 Floor has deleted
68 Floor has deleted

#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 应该不少吧还,有知识的请赐教,我好像看哪里统计还不少。

You need to Sign in before reply, if you don't have an account, please Sign up first.