eureka summer job 2016 Web FrontEnd Lecture

pairs Div

Sogo Ohta

2005

Web 2.0

Google Maps

Ajax

jQuery

Ruby on Rails

Rich Internet Application

Adobe

• Flash

• Flex

• AIR

Google Chrome

(2008)

V8

Google Web Toolkit (2006)

Backbone.js (2010)

AngularJS (2010)

2016 Web Frontend

https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.n9qqwangr

https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.n9qqwangr

https://facebook.github.io/react/index.html

https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu

Reactの特徴

Declarative

宣言的

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

データが変更されたら

すべてを書き直す（ように書ける）

Component-Based

コンポーネントベース

https://facebook.github.io/react/docs/tutorial.html

https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu

https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu

https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu

https://speakerdeck.com/koba04/reactfalsezui-xin-dong-xiang-tobesutopurakuteisu

https://html5experts.jp/hokaccha/13301/

Learn Once,Write Anywhere

https://facebook.github.io/react-native/

https://github.com/fbsamples/f8app

TypeScript

https://www.typescriptlang.org/

http://web.archive.org/web/20130120204931/http://d.hatena.ne.jp/brazil/20050829/1125321936

http://www.yunabe.jp/docs/javascript_class_in_google.html

ES2015

http://www.slideshare.net/teppeis/es6-in-practice

https://kangax.github.io/compat-table/es6/

https://www.typescriptlang.org/

静的型付け

http://memo.goodpatch.co/2016/09/rubykaigi-2016-report-ruby3-typing/

https://dl.dropboxusercontent.com/u/261418/omotesando_rb_3/index.html#/

足回り

• npm

• typings

• Webpack

近未来

Progressive Web Apps

https://speakerdeck.com/armorik83/indexeddb-worker-server-side-rendering-sositehurontoendofalsewei-lai

Physical Web

http://google.github.io/physical-web/

WebAssembly

https://webassembly.github.io/

Enjoy!