Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

サイボウズのフロントエンド開発 現在とこれからの挑戦

15,241 views

Published on

Cybozu Meetup #1 での発表資料
https://cybozu.connpass.com/event/49521/

Published in: Technology
  • Be the first to comment

サイボウズのフロントエンド開発 現在とこれからの挑戦

  1. 1. Cybozu Meetup #1 Feb 27, 2017
  2. 2. Hello! • a.k.a. @teppeis • 2007 • Garoon • kintone • 2016
  3. 3. JavaScript https://gihyo.jp/dp/ebook/2015/978-4-7741-7477-8
  4. 4. Agenda • • •
  5. 5. • Web • •
  6. 6. 1997
  7. 7. Office
  8. 8. Garoon
  9. 9. Cybozu Live
  10. 10. 2011 cybozu.com
  11. 11. kintone
  12. 12. • • Office • Garoon • Live / • • kintone
  13. 13. Web
  14. 14. • • B2C Web, PC • Web • 

  15. 15. • 700 • cybozu.com: 65 • : 1,000 • : 1.6 • : 600 • : 200
  16. 16.
  17. 17. • : • kintone JavaScript: 45 • : • Web 
 • : •
  18. 18. • kintone Google Closure Compiler 
 2010 • • TypeScript, Flow •
  19. 19. JSDoc
  20. 20. JSDoc • JS • JavaScript • • JSDoc
  21. 21. UI
  22. 22. UI • Closure Library • UI • MVC
  23. 23. UI Component ( )
  24. 24. UI Component ( ): render
  25. 25. UI Component ( ): template
  26. 26. • Good • UI UI • Bad • • DOM • • MVC
  27. 27. React
  28. 28. https://www.slideshare.net/ama-ch/google-closure-toolsreact
  29. 29. React • React 
 Closure • Flux •
  30. 30. React
  31. 31. React : Stateless
  32. 32. http://blog.cybozu.io/entry/2015/11/04/080000
  33. 33. • 
 • cybozu.com •
  34. 34. • karma • • Lint : fixclosure • : grunt-parallelize • Grasp • Yeoman Generator scaffolding
  35. 35. Yeoman
  36. 36. • kintone • 3rd party • JavaScript • JavaScript API • JS •
  37. 37. https://cybozudev.zendesk.com/hc/ja/articles/202640890- -TEL-
  38. 38. JS API https://cybozudev.zendesk.com/hc/ja/articles/202640890- -TEL-
  39. 39. https://kintone.cybozu.com/jp/feature/plugin.html
  40. 40. • • • •
  41. 41. https://www.slideshare.net/ama-ch/kintone-61942444
  42. 42. • React • ES2015+ • npm (Artifactory) • CI with •
  43. 43. • • JS / 
 
 • 3rd party 

  44. 44. • OpenSocial / Caja • • Salesforce Lightning / LockerService • Secure DOM : Web Sandbox LockerService - Qiita
  45. 45. • • JavaScript •
  46. 46. : iframe • sandbox • URL OAuth • • (postMessage) • UI : iframe • • ES Realms API ? • https://github.com/tc39/proposal-realms
  47. 47. • • 3rd party / 
 UI 

  48. 48. Jenkins Blue Ocean (React ) https://jenkins.io/projects/blueocean/
  49. 49. Lightning ( )
  50. 50. • • CSS • 3rd party API React 
 • Web Components?
  51. 51. Web Components 
 UI http://blog.anatoo.jp/entry/2016/12/09/201511
  52. 52. https://cybozu.co.jp/efforts/accessibility/
  53. 53. /
  54. 54. アクセシビリティ基準に基づいたコントラストの設定 3.33 : 1 10.98:1 https://www.slideshare.net/KobayashiDaisuke1/web-59111913
  55. 55. Frontend Weekly Lunch https://twitter.com/teppeis/status/730704571849269248
  56. 56. ECMAScript http://azu.github.io/slide/2016/jser5years/sc22-ecmascript-ahodc.html
  57. 57. • • • • • • • •
  58. 58. FAQ
  59. 59. FAQ • Closure Compiler • TypeScript ES2015 • Vanilla Flowtype • React Angular TypeScript • • React

×