Tsutomu Ogasawara gave a presentation on cutting edge web technologies. He discussed his career working on Sony products like the Walkman and PlayStation and more recently at Digital Garage and Rakuten developing web services. He then covered current front-end trends like CSS preprocessors, JavaScript frameworks, and task runners. Emerging technologies like WebSockets, backend-as-a-service platforms, and the MEAN stack were also presented. Ogasawara concluded by discussing how the web is evolving from traditional HTTP requests to incorporate real-time capabilities and connect diverse devices in the Internet of Things.

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!