1SPA

D3 2016.1.22 @kita_ly

1SPA

SPA

Web/JSTips

AngularJS SPA

TypeScript ES6

Gulp

node

npm

Babel

TypeScript

AngularJSReact

Bower

Gulp

ES6

HTML

CSS

SASS

Browserify

Flux

Nginx

TSLint

ESLint

Jenkins

FlowType

EJS

PDFViewerTSD

UI-Router

LocalStorage

WebSocket

EmberJS CycleJS

Redux

Angular2

promise RequireJS

CoffeeScript

( @kita_ly )

Java -> Scala -> ()

1 JS : Scala 7 : 3

:MySQL, ElasticSearch, Scala, Play2, TypeScript, AngularJS

: 12

https://jp.stanby.co

https://jp.stanby.co

https://stanby.co

https://stanby.co

SPA (AngularJS / TypeScript)

Backend API(Play2 / Scala)

AWS

MySQL Elasticsearch

Other APIs

Memcached

SPA (AngularJS / TypeScript)

Backend API(Play2 / Scala)

AWS

MySQL Elasticsearch

Other APIs

Memcached

AngularJS SPA

AngularJS

1

AngularJS

Directive

AngularJS 2Way

JS (Angular Expression)

Super Fat Controller

Repeat Yourself

React

!?

React SPA (UI)

Angular2

Angular1 1.3

Thinking in React https://facebook.github.io/react/docs/thinking-in-react.html

https://facebook.github.io/react/docs/thinking-in-react.html

= DOM JS UI

AngularJS ()

React

TooltipUI

React : Just the UI

Root

MVC

MVC does not Scale

Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw

https://www.youtube.com/watch?v=nYkdrAPrdcw

MVC does not Scale

Hacker Way: Rethinking Web App Development at Facebook https://www.youtube.com/watch?v=nYkdrAPrdcw

https://www.youtube.com/watch?v=nYkdrAPrdcw

Flux

!?

Flux Facebook

FW

Store

Single Source of Truth

Component (View) Store Subscribe

Uni-Directional Data Flow

Fluxxor, Redux, Reflux, etc..

Flux

Angular - https://github.com/wbuchwalter/ng-redux- https://github.com/christianalfoni/flux-angular

Store Subscribe Component

https://github.com/wbuchwalter/ng-reduxhttps://github.com/christianalfoni/flux-angular

Flux

View View

View

View

View

View

JobList Store

Application List Store

Timeline Store

Application Store

Flux

View View View View

JobList Store

Application List Store

Timeline Store

Application Store

Dispatcher

Resume Update Action

Angular

2009

API ()

FWAngular

HTML JS() ()

React

React

Flux FW/

3rd Party

JSX: JS-Centric

JSHTML

API

()

TypeScript ES2015

TypeScript

JavaScript (Java C# Syntax)

: Microsoft

AltJS

- interface, class, Generic Type- Structural Sub-Typing - abstract class- - many other ..

ECMAScript

TypeScript

ECMAScript2015 (ES6)

JavaScript

2009 ES5 6

- let, const- class- - - Desctucturing Assignment- ES6 module (import/export)- etc

SPA

ES6

ES7

JS

React

React in TSX

http://blog.wolksoftware.com/working-with-react-and-typescript

ES6 TypeScript

npm

tsc, babel, browserify

gulp gulp-typescript

TypeScript

TypeScript + ES6 Module

ES6 + RequireJS

BundledES5

ES5 + RequireJS

tsc

babel

browserify

ES6 Compatibility Table https://kangax.github.io/compat-table/es6/

TypeScript/ES6

var

function var

unused variables/functions

TSLint, ESLint, TSC var Lint const/let

function var Lint

unused variables/functions Lint

TSC any

Gulp Task

- RevisionHash for JS, CSS, ( e.g. app-9x9x9x.js ) - 3rd Party Bundle

- GZip for JS, CSS (e.g. app.js.gz ) - minify, uglify for JS, CSS

TypeScript : Browserify, Babel, TSC

SASS

ESJ

- TS-Lint, ES-Lint, SASS-Lint - Gulp-Webserver- for TS, SASS- watch ()

SPOF

SPOF

npm

Transpile(ES6 -> ES5) TSCBabel

Gulp =

npm

Gulpnpm

FWAPI

- Fluxetc.- SPAFW

ES6

Grunt / Gulp npm

Let's NOT Lets Enjoy Chaos!