NG-CONF 2016的粗略记述

2 年 ago
科, 雅
3 minutes

今年（2016年）在盐湖城举办了一年一度的Angular界的盛典活动ng-conf。虽然我没有去现场参加，但我参加了ng-conf在东京举办的延伸活动，并以公开观看的方式观看了第一天和第三天的活动，这是我的记忆记录。

5月4日，第一天。

演讲稿.

视频

我对Angular2的性能讨论和周边生态系统的讨论很感兴趣。我希望边听边亲自尝试！以下是我想尝试的内容：

Augury AngularJS 1.xでいうところのBatarangle的なツール. 後述.

Angular CLI Angular2の雛形プロジェクトや、componentのscaffoldingをしてくれたりするツール。後述.

NativeScript 2.0 Mobile向けのプラットフォームであるNativeScriptの2.0についてアナウンスがありました。

Angular 2的力量苏醒

视频 huà)

当谈到Angular编码风格时，人们常会提到约翰·帕帕（John Papa）的会议。虽然大多数是关于Angular 2的教程中的英雄列表的实时编码演示。

关于 Style Guide 的具体内容，请参考 https://angular.io/docs/ts/latest/guide/style-guide.html 的链接。

Angular 2对样式的全新创新

影片

在Angular2的@Component中，谈论了视图封装的问题。
由于Angular2模拟了Web Component的Shadow DOM，所以可以使用诸如:host之类的Web Component和CSS选择器，即使在不支持Web Component的浏览器上也可以使用。

Typescript: Angular 2的秘密武器

视频

像是对TypeScript的宣传一样的会议。因为了解了tsserver，所以有些让我觉得“噢，原来如此”的内容，但并没有太多新的发现。

Angular 2万能模式

视频

关于Angular2的服务器端渲染模块angular-universal的介绍。

这篇文章的功能上讲述了已知的内容（详细介绍了Angular2的服务器端渲染），但是关于在SSR中静态输出Progressive Web App的App Shell以及使用preboot（也是angular-universal的功能）无缝桥接App Shell和内容的讨论是新颖的。

通过深度脑刺激技术调整人脑电路中的旋钮。

视频

Angular完全与JavaScript和Web无关的Session。主要是关于大脑疾病的讨论。在这个Session期间，时间线上充斥着“无法理解正在发生的事情”之类的推文，非常有趣。就这样。

路由

视频

最近，有关Angular2的路由器（曾被称为”alt-router”）的讨论。与以前的Router相比，主要区别是现在支持延迟加载（现已被标记为”deprecated-router”）。

據說在Lazy Loading的情況下，可以寫成以下方式。

@Routes([
  {path: 'simple', component: 'simpleCmp'},
  {path: 'user/:name', component: 'UserCmp'}
])
class TeamCmp implements OnActivate {
  routerOnActivate(segment: RouteSegment, tree: Tree<RouteSegment>) { ... }
}

在懶加載的情況下，由於在路由定義時，尚未導入下層組件類別，因此需要以字符串形式在組件鍵中定義內容，並在路由時使用System.js解析該字符串以動態加載。

组件，组件，组件！…和 Angular 1.5

视频

如题所示，这是关于从AngularJS 1.5版本开始可使用的angular.module(…).component的讨论。同时，还涉及了一些关于1-way绑定以及组件路由的内容。

深入观察你的应用，使用之前被称为Batarangle的Augury工具。

视频 huà)

一个关于Chrome浏览器扩展程序“Augury”的介绍会议。
除了可以查看组件的信息外，还可以即时修改值。
这个工具在AngularJS 1.x中类似于Batarangle。虽然我自己从中途开始就不再使用Batarangle了，但是大部分Batarangle可以做的事情似乎都可以在这个工具上实现。

ng-show: Angular 2的展示功能

视频

ng-show在AngularJS中并不与Directive有任何关联。

虽然这不是一个有用的内容，但作为一个笑话非常有趣，我只能说你一定要看一看。

角材质：钛章鱼

视频

以下是关于提供Angular2 Material Design UI的库material2的故事。此外，标题中的“Titanium Octopus”是material2的代号。

Kara姐是material2的主要贡献者之一，在现场给我们进行了现场编码演示。令人惊讶的是，她的编码速度比代码本身更快。

测试你所有的任务

视频 huà)

我以为这是关于考试的话题，但却有一半的时间是用来解释Zone.js的概念。他会在大约10分钟内简明扼要地讲解Zone.js，所以我认为只看这部分就很值得。

以下是有关Zone.js在测试Angular2应用程序时如何发挥作用的讨论的后半部分。在解释中使用的存储库在这里。还介绍了使用ngZone.onStable来获取“异步完成的时机”的e2e测试示例，但似乎此存储库中不包含该示例。

函数式响应式JavaScript- 让我们停止对话中的后悔！

视频 (video)

介绍函数式编程和Observable的基础知识的会议（似乎只是如此）。几乎没有关于Angular的讨论。

摇滚医生行医

视频

关于Angular2的文档。由于https://angular.io的文档是在GitHub上进行管理的，所以如果有任何疑问或者要求修改的地方，请提供Pull Request。

在Web和原生应用程序之间共享代码

视频 huà)

使用Angular2来实现在Web App和NativeScript下重复利用代码的讨论。

很遗憾，对于Session的内容没有介绍相应的资源，但从观察到的现场编码屏幕来看，似乎是以下的划分。

    • ServiceはNativeScript, Webで共通のものを使う

 

    Component, Template, CSSはNativeScriptとWebで別々のものを用意する

我从未接触过NativeScript，但即使不完全相同的代码，也可以像Web App一样开发移动应用，我觉得还是很有吸引力的，但是不知道怎么样呢？（因为除了NativeScript，还有Ionic2、React Native，还有渐进式Web应用，选择太多了，不知道选哪一个好。这个心情啊）

无论如何，这个Session总体上都有点做作，听的时候感觉有些恼火…

在Angular 2中的生成艺术

视频

创建了一个名为teropa.info/chime的基于Angular2的Generative Visualization的Web App。

「在Angular2中如何处理Web Audio API的AudioContext」这个主题平时很少听到，从声音源的产生到效果的产生，通过单向数据流进行实现，使用Observable等方式使得内容非常引人入胜。

我认为可能会是这里的相关存储库，所以打算在之后仔细阅读一下。

渐进式网络应用

视频 huà)

首天的开场是由Angular移动团队的渐进式Web应用会议。他们讨论了以下三个主题。

    • Instant loading: App Shellで実現

 

    • Offline: Service Workers

 

    Installable: Web App Manifest

为了加快初始加载速度，有一种方法是将应用程序分为App Shell和动态内容，并先显示App Shell来防止用户离开。

我觉得有趣的是，App Shell本身也可以用Angular2编写，并在构建时使用angular-universal将其输出为静态HTML（在angular-universal的会话中也稍微提到了这一点）。

还有一种方法是通过Service Workers返回生成的App Shell，这样可以实现更快的初始加载速度。

最後介绍了Angular Mobile Toolkit，它与AngularCLI（ng new –mobile）配合使用可以生成manifest文件，并且还能帮助创建App Shell和Service Worker。
实际上，已经使用Toolkit创建了https://github.com/angular/issue-zero/的应用程序，所以我也想加载此存储库。
因为我稍微看了一眼，这个UI使用的是Angular2 Material，后端服务使用的是Firebase（AngularFire2），Redux风格的架构使用的是ngrx/store，以及集成了Angular Universal的构建流程。这是一个完整的Angular2课程，绝对有很大的阅读价值。

第二天(5月5日)

我有Keynote，但是我没有听过…

第三天(5月6日)

Typescript 类型脚本

视频

又一场TypeScript的讲座。和第一天一样，并没有太多新鲜话题，但最后稍微谈到了一些有关TypeScript 2.0的内容。
如果你对TypeScript 2.0的内容感兴趣，我觉得你可以去看一下Build大会上Anders Hejlsberg的讲座。

我个人感觉到”Path mapping”那一部分有一个提示说”如果使用JSPM很棒”。根据我的理解，Path mapping只是在tsconfig.json中更灵活地指定模块位置的方式，我认为它与JSPM生成的config.js是两个不同的东西，但这是否正确呢？

承诺可能比你还要古老

视频 huà)

就像标题所示，承诺（确切地说是其源流Future Pattern）诞生已有将近40年的历史，从那时起一直到今天的ES2015的Promise的发展变迁。在Angular方面，只是在讲述过程中略微提及了AngularJS 1.x的$q，基本上是在学习历史的感觉。

输送炒作

视频

Angular2的管道Session。开发者指南中与PIPES基本相同。

多槽复合文章插入

视频 huà)

AngularJS 1.5和Angular2都可以实现多重传输（Multi Transclude）的会话。

动画

视频

ng-conf时点，新的动画机制尚未合并，以下是相关内容。

据我了解，Angular2正在考虑基于Web Animation API的动画，同时Angular团队也正在开发Web Animation API的polyfill。

Session中介绍的内容已储存在https://github.com/matsko/ng-conf-demos的代码库中。
从Session的内容和上述代码库的一瞥来看，给我留下了非常多可能性的印象。而且，简单几句话无法概括。
举个例子，可以以编程方式内联处理CSS Transition和Keyframe，还可以将样式表中定义的class和keyframe作为动画状态导入，等等。

我打算静下心来仔细阅读这个代码库。

学习克林贡语

视频 huà)

“什么是”KLINGON”呢？当我想到时，原来是一个以”CLI ng on”和”Star Trek”的克林贡人为基础的笑话。我才不在乎呢，那种东西。”

这篇内容介绍了angular-cli。

angular-cli是用于生成Angular2项目以及各种代码（组件、服务等）的生成器。通过使用它生成的项目包含了各种测试（单元测试、端到端测试），整体上给人留下了非常完善的印象。

如果要提出不足之处的话，可能是因为它依赖于一个不太熟悉的构建工具ember-cli，可能会使定制变得困难一些。

另外，从稍微使用过的感觉来看，通过ng new命令生成项目的脚手架会花费相当长的时间（主要是npm i的部分）。

适用于我们其他人的Angular 2

尽管Angular2中有一些新概念，如Zone.js和Observable等，但我并不害怕！

React Native 反应原生

视频

angular2-react-native的Session。尽管体系结构有所不同，但与第一天的NativeScript会议相似的印象。另外，由于在这个阶段非常困，所以几乎没能留下任何印象……

响应式编程，在Netflix、微软、Slack等公司以及更多领域正在改变世界！

视频

前半部分是对Observable（或称为RxJS）的解释，后半部分是关于Netflix、Microsoft和Slack实际使用Observable的介绍。其中大部分内容与Angular无关。

使用AngularFire进行异步数据模式操作

视频

继续讨论Observable的话题，这里是关于适用于Angular2的内容。
介绍了Angular2的客户端Firebase，即angularfire2。

在angularfire2中，重点是以下面的方式将Firebase存储的数据作为Observable进行处理。

@Component({
  template:`
    <ul>
      <li *ngFor="#question of questions | async">
        {{question.text}}
      </li>
    </ul>
  `
})
class App {
  questions:Observable<Question[]>
  constructor(af:AngularFire) {
    // Get an observable of a synchronized array from <firebase-root>/questions
    this.questions = af.list('/questions');
  }
}

我从未接触过Firebase和AngularFire，但我认为可以参考的是从远程获取存在的数据作为Observable，然后在模板中使用Async Pipe。这种方法可能也可以在将Angular2与类似Falcor或Relay的数据获取库结合使用时使用。

工作中的不快乐

视频

這個課程與Angular無關，是關於作為一名工程師為了幸福工作所需的心態。

揭开修饰器的神秘面纱

视频 huà)

在Angular 2中，经常使用TypeScript的装饰器，但是装饰器到底是做什么的？接下来我会给你解释一下。
如果你对装饰器会转换成什么样的代码感兴趣的话，不妨去看一下。

成为Angular 2的贡献者

视频

让我们打开 http://www.ng-contrib.org/。就这样。

使用ngRx响应式Angular2

视频

ngrx/store是一个用于在Angular2中实现类似Redux的架构的库的介绍。
据说这个库在2015年就已经存在了，但我完全不知道…

ngrx/store的最大特点莫过于可以将由Reducer生成的State作为可观察对象接收。这与之前提到的angularfire2类似，都可以将数据生成从数据存储中以流的方式表示出来。

ngrx/store的示例已存储在https://github.com/ngrx/angular2-store-example中，它是想要仔细阅读的存储库的一部分。

只是一个文本框，会有什么问题呢？

由于与 @laco0416 的讨论非常热烈，我完全没有注意到关于上述ngrx/store的会话。可能是关于Angular2的表单讨论。

使用Codelyzer进行自动化的Angular 2风格检查。

同样的

不使用类固醇来提高表现

同样的理由
与上文相同
与前文一致
如上所述
在前文中提到
正如之前所述
如前所述
以前所述

✖
广告
将在 10 秒后关闭
bannerAds