Cutting edge of web technology

  • 833 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
833
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Cutting Edge of Web Technology Tsutomu Ogasawara 2014.02.19 @ “Tech Talk”
  • 2. Self Introduction Tsutomu Ogasawara @ogaoga Rakuten, Inc.
  • 3. My Career / Sony & SCE (1996~2010)
  • 4. My Career / Digital Garage (2010~2012)
  • 5. My Career / Rakuten (2012~)
  • 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. Personal Activity Push & Paste (iOS / OSX / Chrome) icotile (HTML5) http://www.ogaoga.org/push-and-paste.html http://icotile.ogaoga.org/
  • 8. Rakuten Technology Conference 2013 Site ● ● ● ● Responsive Design Smooth Interaction Web Storage Generate from Data & Templates ● Task Automation with Grunt
  • 9. Rakuten Technology Conference 2013 Site Responsive Design Change the layout based on the window width by using CSS media queries.
  • 10. Rakuten Technology Conference 2013 Site Smooth Interaction Seamless & Smooth Animation with CSS3.
  • 11. Rakuten Technology Conference 2013 Site Web Storage ● Show the number of new updates with red number. ● Save user customized time table.
  • 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. Rakuten Technology Conference 2013 Site Task Automation with Grunt ● Run PhantomJS to generate HTML files. ● Compile Sass to CSS.
  • 14. Rakuten Technology Conference 2013 Site More...
  • 15. New Evolution of Web ウェブの進化 http://evolutionofweb.appspot.com/
  • 16. HTML5
  • 17. HTML5
  • 18. HTML5 Developer Economics Q1 2014: State of the Developer Nation http://www.visionmobile.com/product/developereconomics-q1-2014-state-developer-nation/
  • 19. Front-end Technology
  • 20. Front-end Technology ● ● ● ● ● CSS Preprocessor UI Framework altJS MVC-like Framework Task Runner
  • 21. Front-end Technology CSS Preprocessor ● LESS ● Sass ● Compass Nested, Variables, Mixins, Automation, etc... Compass http://compass-style.org/
  • 22. Front-end Technology UI Framework ● Bootstrap Grid System, UI parts, Responsive, Interaction, etc... Bootstrap http://getbootstrap.com/
  • 23. Front-end Technology altJS Alternative to JavaScript. Easy to write, Performance, Static typing, etc… ● CoffeeScript ● TypeScript ● asm.js
  • 24. Front-end Technology Task Runner ● Grunt Compiling, Minification, Image Processing, Testing, etc... Grunt: The JavaScript Task Runner http://gruntjs.com/
  • 25. Cutting Edge of Web Technology
  • 26. Cutting Edge of Web Technology WebSocket Realtime, Push, Broadcast protocol ● Meteor Meteor https://www.meteor.com/
  • 27. Cutting Edge of Web Technology BaaS Mobile application development without infrastructure and serverside development. ● Parse Parse https://parse.com/
  • 28. Cutting Edge of Web Technology MEAN ● ● ● ● MongoDB Express AngularJS Node.js MEAN - A Modern Stack - Development http://www.mean.io/
  • 29. Cutting Edge of Web Technology Internet of Things
  • 30. HTTP Request HTML HTTP Request HTML Ajax JSON WebSocket
  • 31. Wrap up ● ● ● ● ● ● Native ⇒ Native + HTML5 Back-end ⇒ Front-end HTTP ⇒ Ajax ⇒ WebSocket Server ⇒ Cloud ⇒ BaaS LAMP ⇒ MEAN Browser ⇒ App ⇒ IoT
  • 32. Thanks!