Cutting Edge of Web TechnologyTsutomu Ogasawara

2014.02.19@ “Tech Talk”

Self Introduction

Tsutomu Ogasawara@ogaogaRakuten, Inc.

My Career / Sony & SCE (1996~2010)

My Career / Digital Garage (2010~2012)

My Career / Rakuten (2012~)

My Career / TechnologyAge 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

Personal ActivityPush & Paste (iOS / OSX / Chrome) icotile (HTML5)

http://www.ogaoga.org/push-and-paste.html http://icotile.ogaoga.org/

Rakuten Technology Conference 2013 Site

● Responsive Design● Smooth Interaction● Web Storage● Generate from Data

& Templates● Task Automation

with Grunt

Responsive DesignChange the layout based on the window width by using CSS media queries.

Rakuten Technology Conference 2013 Site

Smooth Interaction

Seamless & Smooth Animation with CSS3.

Rakuten Technology Conference 2013 Site

Web StorageRakuten Technology Conference 2013 Site

● Show the number of new updates with red number.

● Save user customized time table.

Generate from Data & TemplatesRakuten Technology Conference 2013 Site

● PhantomJS generates static pages by applying the data to templates.

● We didn’t need to edit HTML files directly.

Task Automation with GruntRakuten Technology Conference 2013 Site

● Run PhantomJS to generate HTML files.

● Compile Sass to CSS.

More...Rakuten Technology Conference 2013 Site

New Evolution of Web

ウェブの進化 http://evolutionofweb.appspot.com/

HTML5

HTML5

HTML5

Developer Economics Q1 2014: State of the Developer Nationhttp://www.visionmobile.com/product/developer-economics-q1-2014-state-developer-nation/

Front-end Technology

Front-end Technology

● CSS Preprocessor● UI Framework● altJS● MVC-like Framework● Task Runner

CSS PreprocessorFront-end Technology

● LESS● Sass● Compass

Nested, Variables, Mixins, Automation, etc...

Compasshttp://compass-style.org/

UI FrameworkFront-end Technology

● Bootstrap

Grid System, UI parts, Responsive, Interaction, etc...

Bootstraphttp://getbootstrap.com/

altJSFront-end Technology

Alternative to JavaScript. Easy to write, Performance, Static typing, etc…

● CoffeeScript● TypeScript● asm.js

Task RunnerFront-end Technology

● Grunt

Compiling, Minification, Image Processing, Testing, etc...

Grunt: The JavaScript Task Runnerhttp://gruntjs.com/

Cutting Edge of Web Technology

WebSocketCutting Edge of Web Technology

Realtime, Push, Broadcast protocol

● Meteor

Meteorhttps://www.meteor.com/

BaaSCutting Edge of Web Technology

Mobile application development without infrastructure and server-side development.

● ParseParse

https://parse.com/

MEANCutting Edge of Web Technology

● MongoDB● Express● AngularJS● Node.js

MEAN - A Modern Stack - Developmenthttp://www.mean.io/

Internet of ThingsCutting Edge of Web Technology

JSONAjaxHTMLHTTP RequestHTMLHTTP

Request WebSocket

Wrap up

● Native ⇒ Native + HTML5● Back-end ⇒ Front-end● HTTP ⇒ Ajax ⇒ WebSocket● Server ⇒ Cloud ⇒ BaaS● LAMP ⇒ MEAN● Browser ⇒ App ⇒ IoT

Thanks!