Cybozu Meetup #1

Feb 27, 2017

Hello!• a.k.a. @teppeis

• 2007

• Garoon • kintone

• 2016

JavaScript

https://gihyo.jp/dp/ebook/2015/978-4-7741-7477-8

Agenda•

•

•

• Web

•

•

1997

Office

Garoon

Cybozu Live

2011 cybozu.com

kintone

•

• Office

• Garoon

• Live /

•

• kintone

Web

•

• B2C Web, PC

• Web

•

• 700

• cybozu.com: 65

• : 1,000

• : 1.6

• : 600

• : 200

• :

• kintone JavaScript: 45

• :

• Web

• :

•

• kintone Google Closure Compiler

2010

•

• TypeScript, Flow

•

JSDoc

JSDoc

• JS

• JavaScript

•

• JSDoc

UI

UI

• Closure Library

• UI

• MVC

UI Component ( )

UI Component ( ): render

UI Component ( ): template

• Good • UI UI

• Bad •

• DOM

•

• MVC

React

https://www.slideshare.net/ama-ch/google-closure-toolsreact

React

• React

Closure

• Flux

•

React

React : Stateless

http://blog.cybozu.io/entry/2015/11/04/080000

•

• cybozu.com

•

• karma

•

• Lint : fixclosure

• : grunt-parallelize

• Grasp

• Yeoman Generator scaffolding

Yeoman

• kintone

• 3rd party

• JavaScript

• JavaScript API • JS

•

https://cybozudev.zendesk.com/hc/ja/articles/202640890- -TEL-

JS API

https://cybozudev.zendesk.com/hc/ja/articles/202640890- -TEL-

https://kintone.cybozu.com/jp/feature/plugin.html

•

•

•

•

https://www.slideshare.net/ama-ch/kintone-61942444

• React

• ES2015+

• npm (Artifactory)

• CI with

•

•

• JS /

• 3rd party

• OpenSocial / Caja •

• Salesforce Lightning / LockerService • Secure DOM

: Web Sandbox LockerService - Qiita

•

• JavaScript

•

: iframe• sandbox

• URL OAuth

•

• (postMessage)

• UI : iframe

•

• ES Realms API ? • https://github.com/tc39/proposal-realms

•

• 3rd party /

UI

Jenkins Blue Ocean (React )

https://jenkins.io/projects/blueocean/

Lightning ( )

•

• CSS

• 3rd party API React

• Web Components?

Web Components UI

http://blog.anatoo.jp/entry/2016/12/09/201511

https://cybozu.co.jp/efforts/accessibility/

/

アクセシビリティ基準に基づいたコントラストの設定

3.33 : 1 10.98:1

https://www.slideshare.net/KobayashiDaisuke1/web-59111913

Frontend Weekly Lunch

https://twitter.com/teppeis/status/730704571849269248

ECMAScript

http://azu.github.io/slide/2016/jser5years/sc22-ecmascript-ahodc.html

•

•

•

•

•

•

•

•

FAQ

FAQ • Closure Compiler

• TypeScript ES2015

•

Vanilla Flowtype

• React Angular TypeScript

•

• React