サーバサイドエンジニアが 1年間まじめにspaやってみた
TRANSCRIPT
-
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!