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.

Cutting edge of web technology

1,354 views

Published on

某社 Tech Talk にてお話しした資料。一部削除してあります。

Published in: Technology
  • Be the first to comment

Cutting edge of web technology

  1. 1. Cutting Edge of Web Technology Tsutomu Ogasawara 2014.02.19 @ “Tech Talk”
  2. 2. Self Introduction Tsutomu Ogasawara @ogaoga Rakuten, Inc.
  3. 3. My Career / Sony & SCE (1996~2010)
  4. 4. My Career / Digital Garage (2010~2012)
  5. 5. My Career / Rakuten (2012~)
  6. 6. My Career / Technology Age Product Technology 1996~ Walkman ハンダ付け 1998~ Network Walkman, IC Recorder Assembler, C, Verilog 2001~ CLIE Palm OS, C/C++, UI 2004~ PlayStaton2, PlayStation3 UI Design, XMB 2007~ mylo C++, Qt 2008~ Home Server, Video, STB UI Design, XMB 2009~ Google TV UI Design, Android 2010~ Web Service CakePHP, HTML5, Feature Phone 2012~ HTML5 Project HTML5, Smartphone, Web OS
  7. 7. Personal Activity Push & Paste (iOS / OSX / Chrome) icotile (HTML5) http://www.ogaoga.org/push-and-paste.html http://icotile.ogaoga.org/
  8. 8. Rakuten Technology Conference 2013 Site ● ● ● ● Responsive Design Smooth Interaction Web Storage Generate from Data & Templates ● Task Automation with Grunt
  9. 9. Rakuten Technology Conference 2013 Site Responsive Design Change the layout based on the window width by using CSS media queries.
  10. 10. Rakuten Technology Conference 2013 Site Smooth Interaction Seamless & Smooth Animation with CSS3.
  11. 11. Rakuten Technology Conference 2013 Site Web Storage ● Show the number of new updates with red number. ● Save user customized time table.
  12. 12. Rakuten Technology Conference 2013 Site Generate from Data & Templates ● PhantomJS generates static pages by applying the data to templates. ● We didn’t need to edit HTML files directly.
  13. 13. Rakuten Technology Conference 2013 Site Task Automation with Grunt ● Run PhantomJS to generate HTML files. ● Compile Sass to CSS.
  14. 14. Rakuten Technology Conference 2013 Site More...
  15. 15. New Evolution of Web ウェブの進化 http://evolutionofweb.appspot.com/
  16. 16. HTML5
  17. 17. HTML5
  18. 18. HTML5 Developer Economics Q1 2014: State of the Developer Nation http://www.visionmobile.com/product/developereconomics-q1-2014-state-developer-nation/
  19. 19. Front-end Technology
  20. 20. Front-end Technology ● ● ● ● ● CSS Preprocessor UI Framework altJS MVC-like Framework Task Runner
  21. 21. Front-end Technology CSS Preprocessor ● LESS ● Sass ● Compass Nested, Variables, Mixins, Automation, etc... Compass http://compass-style.org/
  22. 22. Front-end Technology UI Framework ● Bootstrap Grid System, UI parts, Responsive, Interaction, etc... Bootstrap http://getbootstrap.com/
  23. 23. Front-end Technology altJS Alternative to JavaScript. Easy to write, Performance, Static typing, etc… ● CoffeeScript ● TypeScript ● asm.js
  24. 24. Front-end Technology Task Runner ● Grunt Compiling, Minification, Image Processing, Testing, etc... Grunt: The JavaScript Task Runner http://gruntjs.com/
  25. 25. Cutting Edge of Web Technology
  26. 26. Cutting Edge of Web Technology WebSocket Realtime, Push, Broadcast protocol ● Meteor Meteor https://www.meteor.com/
  27. 27. Cutting Edge of Web Technology BaaS Mobile application development without infrastructure and serverside development. ● Parse Parse https://parse.com/
  28. 28. Cutting Edge of Web Technology MEAN ● ● ● ● MongoDB Express AngularJS Node.js MEAN - A Modern Stack - Development http://www.mean.io/
  29. 29. Cutting Edge of Web Technology Internet of Things
  30. 30. HTTP Request HTML HTTP Request HTML Ajax JSON WebSocket
  31. 31. Wrap up ● ● ● ● ● ● Native ⇒ Native + HTML5 Back-end ⇒ Front-end HTTP ⇒ Ajax ⇒ WebSocket Server ⇒ Cloud ⇒ BaaS LAMP ⇒ MEAN Browser ⇒ App ⇒ IoT
  32. 32. Thanks!

×