Upload
tsutomu-ogasawara
View
899
Download
2
Embed Size (px)
DESCRIPTION
某社 Tech Talk にてお話しした資料。一部削除してあります。
Citation preview
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!