V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

[思客教学] React 全端训练营 - Web 开发的未来

  •  7
     
  •   hayeah · 2015-09-06 11:11:46 +08:00 · 10238 次点击
    这是一个创建于 751 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有兴趣报名话发邮件到 hayeah@gmail.com

    Web 开发的未来,今天就在你的手里

    前端不能只做 Web 端

    移动时代对 Web 有了很大的冲击,用户的注意力大规模地由浏览器转向了手机。市场随之迁移,前端技术再也不能只局限于 Web 。

    但苦于浏览器的限制, Hybrid 或者 Mobile Web 始终无法做到很好的用户体验。与其花费大量的精力去优化 HTML5 应用的性能,并模仿原生组件的交互效果,还倒不如老老实实地去写原生应用。

    学一次,通吃三大平台

    React 的出现改变了 Web 技术的可能性。 ReactNative 直接操作原生组件,因此用户体验和原生应用完全一样。如果说 Swift 是 "Objective-C Without the C", ReactNative 可以说是 “ Web Without the Browser ”。

    虽然 React Web 和 ReactNative 的运行环境不一样,我们只需要学习一套他们共用的 Web 技术:

    • React Virtual DOM 。
    • React 的单向数据流编程模式。函数式编程风格。
    • Flex 布局。 相比传统的 CSS 布局方式更可控。
    • ES6 。成熟的 JavaScript 。模块化,更精简的语法。
    • W3C 事件模型。 Bubble 和 Capture 。
    • Flux 架构。

    在这个 React 全端训练营我们会先在 Web 端对 React 有个初步认识。之后我们会立马转战移动端,做出棒棒哒原生应用!

    项目演示

    Tumblr 客户端

    • 原生滚动。
    • 原生动画效果。
    • “响应式” 布局,支持不同尺寸的设备。

    Tumblr Native 视频演示

    Swipe 任务管理

    • 拉拽排序。
    • 滑动删除。
    • Flux 架构。
    • 用 ReactMotion 实现复杂动画效果。
    • 手势驱动动画。

    Swipe 视频演示

    课程安排

    暖身周

    • ES6 介绍。 JavaScript 模块化。 NPM 依赖管理。
    • 盒子模型。 Flex 布局。
    • CSS3 预处理工具。
    • 项目构建工具。
    • 代码质量工具。 ESLint 。 Flow 类型推理。

    第一周

    • React 入门。
    • Tumblr Web 客户端。
    • 实现多栅栏瀑布流。

    第二周

    • 在手机端实现 Tumblr 原生客户端。
    • 了解什么是 UIView , iOS 的 “盒子模型”, Xcode 素材管理。
    • React Native 入门。
    • ScrollView 。
    • 在 iPad 支持瀑布流。

    第三周

    • 实现一个可以拖拽更改排序 TodoList 应用。
    • 监听触碰事件。
    • 动画效果。 Animated , LayoutAnimation , React-Motion 。
    • 客户端数据管理。各式各样的 “ flux ” 方案选一个来用。

    适合我吗?

    • HTML 和 CSS 基本语法,不需要深入。
    • 你有基础的 Javascript 知识。
    • 你有英文阅读能力。
    • 你爱折腾,想在书本以外动手做项目。
    • *最好有 Mac 和 Xcode ,但不需要 Apple Developer Program 。

    没有 Javascript 经验,但是有技术底子好的话还是可以胜任。课程开始之前我会准备 JavaScript 恶补资料,自己啃一下就 ok 啦~

    *注:目前 ReactNative 只支持 iOS 。使用 ExponentJS 开发不需要 Xcode, 你愿意尝试的话也可以报名,但我无法提供技术支持。没有 Mac 愿意折腾还是可以报名,真的不行的话退款 -。-|||

    和其他 IT 教学有什么不一样

    自学才是最好的学习方式。这个训练营只是提供一个方向,掉坑了帮你更快的爬出来。

    • 实战:依照任务需求自己查质料,读文档,写代码。
    • 自主:不直接给你正确答案,而是适当的提示让你自己解决问题。
    • 氛围:和其他有相同兴趣和理想的小伙伴们交流。
    • 习惯:每天都加强一点点。
    • 耐心:没有人会骂你小白。

    只要你有动力学习,我就愿意花时间教你。如果有需要,你也可以约时间跟我做远端结对编程 (使用 Teamviewer 桌面分享)。

    怎么申请?

    发邮件给我: hayeah@gmail.com

    名额有限。 申请时请回答以下的问题:

    有兴趣申请发邮件,回答以下问题:

    1. 你的本名, Github, 博客 是什么?
    2. 你是学生还是在职?
    3. 你读了那些技术相关的书?
    4. 你解决过最难的技术问题是什么?
    5. 你为什么想加入训练营?

    两天内会回复。假如没有收到回复邮件可能是邮箱问题。

    有任何疑问可以直接联系我:

    学费多少?

    在职 890 RMB 一人。学生优惠 590 。

    因为这个训练营注重学员之间的互动,如果你找朋友一起学习的话可有小伙伴优惠: 690 。

    如果你觉得课程不适合,或者不满意,第一周内我愿意 100% 退款。

    (请不要在这个帖里结队)

    早鸟优惠

    这次的训练营在 9/21 周一开始。在 9/14 号前报名可以享有 100Y 的代金卷,只限 10 人哦。

    以邮件收到的顺序为准,想要参加赶快发邮件报名喔!

    你是谁?

    我叫 Howard ,台湾同胞一枚。小时候随家人移民加拿大。

    在大学的时候我第一次接触 Rails ,那时它刚发布 1.0 版本。大学读一半跑去一家 YCombinator 的公司做 Rails 开发。后来又去了一家叫 Versapay 加拿大做支付的公司,在那里当 tech lead 。

    2010 年辞了 Versapay 的工作,成为自由工作者。 2011 年远程工作,边旅行边赚钱。我写了篇有关这个经历的博文 From The Office to Travelling The World. 那一年第一次来到了天朝。

    2012 年觉得生活太安逸,决定来中国发展,发现难度瞬间提升为 Hard 。在深圳和朋友创立了 小象网,做创意纸品,婚纱相册之类的产品。现在已盈利,处稳定发展状态。

    2013 夏,搬到成都和女朋友在一起。

    2014 夏,和妹子移居大理 ,逃离雾霾。

    Twitter: @hayeah
    Github: github.com/hayeah
    Blog: metacircus.com

    有兴趣的话发邮件到 hayeah@gmail.com

    71 回复  |  直到 2016-01-07 09:12:37 +08:00
        1
    lx7575000   2015-09-06 11:20:14 +08:00 via Android
    报名,求带求带再求带
        2
    sjtlqy   2015-09-06 11:21:15 +08:00
        3
    poshboytl   2015-09-06 11:21:47 +08:00
    很早就认识 Howard 同学, 以前他是个非常靠谱的 hacker.
    现在他现在也是个靠谱的老师。

    Teahour.fm 最新的一期时采访的他, 有兴趣的朋友可以听听: http://teahour.fm/2015/08/31/hakcing-in-dali.html

    :D
        4
    crs0910   2015-09-06 11:30:44 +08:00 via iPhone
    报名
        5
    zhaozhiming003   2015-09-06 11:33:15 +08:00
        6
    RyuZheng   2015-09-06 11:40:40 +08:00 via Android
    我来支持一下,学过前端和 sketch 等课,很有收获
        7
    atcuan   2015-09-06 12:05:17 +08:00
    妹子和女票是一个人么?
        8
    alsotang   2015-09-06 12:14:47 +08:00
    @atcuan 哈哈哈哈
        9
    mikan   2015-09-06 12:19:32 +08:00 via Android
    先来支持下,回公司就报名
        10
    johnnyhappy365   2015-09-06 12:25:16 +08:00
    前面的课程就学到了很多,持续支持
        11
    g0thic   2015-09-06 12:27:05 +08:00
    又来支持了
        12
    iamcho   2015-09-06 13:51:40 +08:00
    mark
        13
    xhacker   2015-09-06 14:09:21 +08:00
    窝也想报~
        14
    samael   2015-09-06 14:09:34 +08:00 via Smartisan T1
    支持一下
        15
    forest520   2015-09-06 14:17:07 +08:00
    在深圳的珠三角技术沙龙见过楼主,典型的技术男啊
        16
    tony612   2015-09-06 14:33:34 +08:00
    赞 Tumblr 的视频
        17
    tony612   2015-09-06 14:34:38 +08:00
    话说大大现在首选 flux 是哪个? redux 么?
        18
    hayeah   2015-09-06 15:02:42 +08:00
    我用 https://github.com/Yomguithereal/baobab 。 基本上就只是用一个模块封装数据,然后模块 export 函数来操作数据 + 监听。

    flux 对小应用来说太繁琐了
        19
    hayeah   2015-09-06 15:03:25 +08:00
    @forest520 好久以前了。。。在帝王大夏的那次吗?
        20
    hayeah   2015-09-06 15:04:14 +08:00
    @atcuan 妹子女票老婆老板是同一人。。。自邓小平以来权利最集中的人之一。
        21
    forest520   2015-09-06 15:14:56 +08:00
    @hayeah 是的,当时才知道你搞的小象网
        22
    rayhome1987   2015-09-06 15:20:49 +08:00
    刚听完 teahour 就在这里看到此帖
        23
    hayeah   2015-09-07 11:13:46 +08:00
    @rayhome1987 哈哈真巧~
        24
    namebyrant   2015-09-07 11:16:08 +08:00
    哈哈,想报名,正在学 js 的 iOS 程序
        25
    malcolmyu   2015-09-07 11:29:56 +08:00
    只是想知道隐居大理怎么做程序员……
        26
    Nixus   2015-09-07 11:31:36 +08:00
    想学习,想报名,最近也在自学,读了各种技术文档。
    但是,上面那几个问题,我真不知道要怎么回答……虽然门槛不高……
        27
    tinkerer   2015-09-07 11:32:02 +08:00
    @poshboytl 活捉 terry 太
        28
    NemoAlex   2015-09-07 13:21:06 +08:00
    说得太好了,我差点相信未来就是 React 了
        29
    Caringor   2015-09-07 13:21:24 +08:00
    想學,然而工資太少負擔不起學費,支持一下 Howard 苣苣吧。
        30
    lijinma   2015-09-07 13:22:01 +08:00
    支持老大。
        31
    hayeah   2015-09-07 14:39:52 +08:00
    @Nixus 只是想了解你的技术背景而已,想到什么就说什么呗~
        32
    hayeah   2015-09-07 14:40:28 +08:00
    @malcolmyu 自由职业咯
        33
    hayeah   2015-09-07 14:43:23 +08:00
    @NemoAlex 哈哈洗脑! JavaScript 是世界上第二好的语言,值得学习~
        34
    robinlovemaggie   2015-09-07 14:54:01 +08:00
    @hayeah 仅次于 LISP ,哈哈……
        35
    vtexChushu   2015-09-07 15:05:23 +08:00
    请问地点是在哪?深圳?
        36
    vtexChushu   2015-09-07 15:06:14 +08:00
    @vtexChushu 还是远程?
        37
    iugo   2015-09-07 17:13:30 +08:00
    以前以为 React 只是一个前端库. 怎么就跨平台开发了? 想学学.

    和 APICloud (AppCan ), DCloud 不同吗? 对比怎样?
        38
    Vincent720   2015-09-07 17:21:26 +08:00
    远程学习么?
        39
    pythonee   2015-09-07 17:47:53 +08:00
    在南山图书馆见过一次 howard
        40
    Dexter123   2015-09-07 19:21:44 +08:00
    刚毕业。。结果只能算在职了。。然而工资都没领几个月, mac 也买不起。桑心。好想学啊=。=
        41
    miaoever   2015-09-07 19:31:24 +08:00
    帮顶
        42
    hantsy   2015-09-07 20:15:50 +08:00
    @hayeah AngularJS/Ionic 好像更成熟一些吧,去年我们已经在项目使用了,当时 1.0 还没正式发布。最新的版本,一套代码,好像 IOS , Android 可以套不同排版和样式了。唉,半年没关注了。
        43
    LancerComet   2015-09-07 20:24:45 +08:00
    表示很有兴趣,可是看到上课用 Mac 就 … 全家微软 :(
        44
    jiyinyiyong   2015-09-07 22:16:53 +08:00
    这种事居然不 @ 我们... http://weibo.com/reactchina
        45
    anuo   2015-09-07 22:19:17 +08:00
    @hayeah ,每天的课程大约要花多上时间来完成?
        46
    falcon05   2015-09-07 22:36:16 +08:00 via iPhone
    兄弟牛逼啊
        47
    shuiniushushu   2015-09-07 23:36:04 +08:00
    上次报名了,但是错过了上课,可惜
        48
    NCE   2015-09-08 08:57:48 +08:00
    个个封装成组件,开发效率有点悬

    而且只能通过 property 单向通信,,,,,,,,
        49
    beenhero   2015-09-08 09:37:08 +08:00
    叶老师,
    我能搭车招带「 React 」光环的「前端工程师」么?



    <small style="opacity: 0.1">有意者私信</small>
        50
    coolicer   2015-09-08 15:37:08 +08:00
    react-native 编译后就是原生了吗?
        51
    malcolmyu   2015-09-10 11:49:50 +08:00
    @hayeah 梦寐以求…感觉很滋润
        52
    hayeah   2015-09-11 10:42:43 +08:00
    @vtexChushu 是远程的~ (终于回来回复帖子了 orz )
        53
    hayeah   2015-09-11 10:43:27 +08:00
    @beenhero 哈哈 -。- 你之前没真的上 NodeJS 嘛~ 有兴趣的话补个差价就好了
        54
    hayeah   2015-09-11 10:45:07 +08:00
    @shuiniushushu 之前 NodeJS 没上的话可以还是可以来哦,补差价就行了
        55
    hayeah   2015-09-11 10:48:55 +08:00
    @iugo APICloud/LeanCloud 这些是后端服务。 React 现在支持多种 “绚烂” 机制。 DOM 是一种, iOS 原生组件是一种。之前还有人搞了个 ncurse 的 React 绚烂层

    https://twitter.com/dan_abramov/status/639494815860850688

    https://github.com/gaearon/react-blessed-hot-motion
        56
    hayeah   2015-09-11 10:54:38 +08:00
    @coolicer ReactNative 的架构是这样的。。。有个 JS 环境运行环境处理 React/UI 逻辑 /业务逻辑。 React 计算出新的 UI 之后会通过一个桥梁让 iOS 端的 “浏览器” 去计算布局,刷新 UI ,启动动画,等等。

    iOS 端上的 “浏览器” 其实就是 iOS 的原生组件构成的,并没有 DOM 或者 CSS 的实现。比如说 <View> 这个组件对应 RCTView 这个原生组件,而 `backgroundColor` 这个 ‘ CSS ’ 属性是通过桥梁去对应 UIView 的背景色。
        57
    hayeah   2015-09-11 10:55:38 +08:00
    @NCE 理解为一个 'partial' 一个组件吧。组件的颗粒度多大按项目需求决定。
        58
    shuiniushushu   2015-09-11 11:29:22 +08:00
    @hayeah 我一看到你就感觉好开心,哈
        59
    hayeah   2015-09-11 11:46:34 +08:00
    @shuiniushushu 啊?我是很有喜感吗?
        60
    loading   2015-09-11 11:55:28 +08:00 via iPhone
    如果能给个 demo 我们看看水平就更有吸引力。
        61
    hayeah   2015-09-11 12:51:28 +08:00
    @loading 课程里要做的应用有视频 demo 啊。帖子里的那些。
        62
    hayeah   2015-09-11 12:52:10 +08:00
    @loading 嗷嗷,移动端上 V2EX 没有绚烂 markdown 。要在左面上看 -。-
        63
    bullettrain1433   2015-09-11 12:57:41 +08:00
    报名报名
        64
    imbahom   2015-09-11 15:45:08 +08:00
    顶, hayeah
        65
    shenchuanli   2015-09-11 16:30:22 +08:00
    图片,是你的娘子么?
        66
    xhowhy   2015-09-13 19:20:45 +08:00
    马克
        67
    hayeah   2015-09-14 11:24:30 +08:00
    @shenchuanli 不是... tumblr 上刷出来的。要不然我就靠她吃软饭了。
        68
    robinlovemaggie   2015-09-15 16:55:59 +08:00
    今天 react native for android 公布了,是不是要加一项内容了?
        69
    Nixus   2015-09-21 17:42:39 +08:00
    @hayeah 请问人满了吗?
        70
    glovenone   2015-09-22 11:18:05 +08:00
    已发,是不是晚了
        71
    sandect   2016-01-07 09:12:37 +08:00
    @hayeah 还有名额没?
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2370 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 73ms · UTC 05:32 · PVG 13:32 · LAX 22:32 · JFK 01:32
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1