上个月,就职典礼反应芬兰会议在赫尔辛基,芬兰首都举行4月24-26日。这是芬兰有史以来第一个作出反应的会议,我很幸运地提出一个车间那里component-driven发展。有反应作为Wayfair选择的框架,这是为了分享我的知识有很大的机会,以及获取来自其他成员的一些有益的学习收获的社区做出反应。

会议本身

芬兰作出反应的组织者放在一个壮观的会议,特别是因为它是有史以来第一次事件。有充足的时间来谈判放松,处理你收到的信息,并与您的朋友和新的连接聊天之间。这次会议是单轨 - 我喜欢的那种,在城市的理想的中心位置托管。有大量的好咖啡的地方周围,太 - 再破裂的利益阵营芬兰提供给与会者。

到目前为止,一切都很好。但是我在那里学到了什么呢?我们将使这个快速和简单-把这个重述作为一个收集闪电高光。

在一些会谈!

通过新的最佳实践贾尼Eväkallio

让我们深入到几个要点总结:

  • 反应质疑的最佳实践。
  • 我们仍然需要做出选择(这可能会导致疲劳),但我们现在有了很好的工具。
  • 种类有记录如何事情的最好的事情工作
  • 你可以使用故事书(或Styleguidist为文档)。
  • 虽然我们可能很聪明,但聪明的解决方案并不比简单的方案更好。
  • 最后,我们将不能够进一步提高上反应了,所以革命一定会发生。
  • 忽视最佳实践警察。

根据贾尼新的最佳实践被定义为:

  1. 建立从小事大事。
  2. 使代码易于复制和删除,不容易改变。
  3. 首先为人类编写代码。
  4. 密切关注你的语言。
  5. 如果没有必要,就不要打碎东西。
  6. 保持开放的心态。

看看贾妮的文章,用户界面开发的当前未来,为多。

音麦的米歇尔Weststrate

我以前见过Immer,它的API看起来很不错。整个演讲中的例子表明,它比使用对象扩展操作符或像不可变库要快得多。

  • 回调地狱传播地狱当我们试图修改嵌套的不可变对象。
  • 在NPM承诺70个库,使减速器短。
  • 其次是音麦允许您通过改变当前的不可变状态来创建下一个不可变状态。

声音整齐的,对不对?米歇尔的幻灯片我可以给你更多的信息。

致富快与反应环境所由帕特里克·洪特

帕特里克向我们展示了如何应对环境可以在某些情况下是有用的,比如显示在你的应用程序的第三方广告。新的API看起来更容易比旧的使用,并更加明确。这是一个巨大的闪电谈话让与会者加快速度,用幻灯片匹配。

总有一种更好的方式来处理由本地化Eemeli阿罗

真的是这样吗?根据Eemeli的说法,是的:

  • JSON并不总是存储数据的最佳格式。
  • 对于非开发人员,比如翻译,这一点尤其重要。YAML是更好的。
  • 为了这一点,Eemeli的第二次谈话,为什么我YAML,展示了他如何创建一个新的YAML库即支持意见,阅读和写作。
  • 大多数翻译者不习惯翻译ui,因为他们处理的是更大的文本。
  • 有很多解决方案react-intl,反应-i18next,或react-message-context,但没有正确、具体的答案。
  • 本地化很重要,所以考虑一下它应该如何工作,并与库作者分享你的想法——他们渴望得到关注!
  • 幻灯片!

样式组件、SSR和主题化KASIAJastrzębska

https://twitter.com/thegreengreek/status/989076428410048512

是时候了时尚的与KASIA!

  • 风格的组件和其他花哨的东西并不需要一个项目的成功,但他们有一定的优势。
  • 是的,你仍然需要了解CSS。
  • 一切都是由默认的本地,但全局样式也是可能的。
  • 缺点:特异性是CSS中的一个大问题。
  • 我们应该像重用组件一样重用样式。
  • 在服务器端渲染的说明:它有一个更好的UX,更好的性能和更好的搜索引擎优化。

通用反应应用程序使用Next.js by新航Karamalegos

你知道53%的手机网站访问量吗被遗弃如果网页需要超过三秒钟加载?根据SIA,Next.js简化了服务器端渲染,代码分裂,并与之反应预取未来路线:

  • 服务器端呈现和代码分割可以提高性能,特别是对于使用慢速设备(如移动电话)的用户。
  • 100 KB的JavaScript的是超过100 KB图像的更昂贵。

想知道更多吗?新航的幻灯片是开放的访问!

国家管理应用程序做出反应与阿波罗通过客户端萨拉·维埃拉

如果您已经在使用Apollo从服务器获取数据,那么使用Apollo管理状态似乎是个好主意。萨拉的演示向我们展示了如何使用阿波罗 - 升压来引导与阿波罗apollo-link-state(适用于本地状态)等等。

API看起来很冗长,但Redux也很冗长;使用一个API来管理状态(服务器和客户端)比使用两个要好。我倾向于同意!莎拉的演讲中有更多内容可以在这里看到

使Linting伟大的再次通过安德烈Okonetchnikov

棉绒是一种工具,发现愚蠢的错误,但它很容易忘记,当您提交到运行棉短绒。然后,突然,十几分钟后,您会看到您的CI失败。安德烈表明人群如何:

  • 皮棉上演运行棉短绒作为预提交钩和沙哑来管理Git钩子。
  • MRM可轻松添加皮棉上演到您的项目:NPX MRM皮棉上演

我是一个巨大的风扇皮棉上演并把它推荐给大家!

如何应对改变了一切由肯·惠勒

如果你是《React》的粉丝,但不知道Ken Wheeler是谁,那就准备接受教育吧。社区的重量级人物之一亲临现场,给人留下深刻印象。根据肯:

  • 反应像真正的应用程序开发的感觉,图书馆是HTML前第一。
  • 在React中,您不需要手动更新视图(像在Backbone中一样)。
  • 组件是一个交易。
  • React是一个完美的抽象。
  • React有一个非常有创意的团队。
  • 反应有很大的开发经验,可以优化(速度和大小),而不会破坏API。
  • React正在发展:异步呈现、悬念和时间分割。

退房肯的幻灯片- 他们是太棒了

开始使用,以理聂格拉夫

我们听到聂有关原因,以及如何利用功能,如变量类型和模式匹配,使不可能的状态是不可能的。他还展示了如何大的类型推断是,它是一个超快速的编译器的顶部。你知道吗…?

  • 你可以做出错误的状态不可能的变种。
  • 这是一个很好的互操作使用JavaScript。
  • 变体阵营道具:类型安全。

但要注意,聂告诫我们不要重写一切理由 - 尝试一个组件第一。他的幻灯片在这里包含进一步的见解。

无状态机和状态图由大卫Khourshid

最被忽视的变量是David Khourshid的时间明智的词语。在有限的事件和状态中,他分享了一些非常有用的建议反应状态机:

  • 不要让用户过渡到一个新的状态之前与UI交互两秒钟。
  • 使用对象来表示状态。
  • 生成分析和集成测试。
  • xstate- 功能性的,无状态的JavaScript有限状态机和状态图。
  • 状态图可视化应该来自代码。

还读书吗?我们几乎完成了!

如何使用反应过来,的WebPack等流行语,如果没有必要的Varya诺娃

我也花了很多时间写,改写我的博客,而不是写博客文章,甚至是结束了我自己静态网站生成器。Varya在她的是一个简洁幻灯片并提醒我上述过程是如何去学习和尝试新事物的好方法。

结论

你已经做到了!你到达了我的闪电重述的终点。明年肯定会有另一个版本的《React Finland》,很可能是在接近夏天的时候。这肯定会吸引那些不习惯雪和低温的人。

这次会议提出了一个很好的机会,了解反应,并满足日益增长的芬兰社区做出反应。我将运用我获得了我的工作在Wayfair的前端框架前进的学习收获的财富。

想看偶数更多从芬兰作出反应?所有谈判的幻灯片可作为bob网下载开源这里,而来自不同的会议参加其他有用的文章可以在这里阅读。最后,看看所有的乐趣,通过共享谷歌相簿!试着找出你最喜欢的音箱。