Upload
joseph-chiang
View
2.190
Download
2
Embed Size (px)
Citation preview
@
2005.10
2009.09
2013.06
2014.02
2010 WebRebuild
2011 SDCC
Stackla
2014.5
Now
Startup
Stackla2015 2015
Reset
npm install npm install npm install npm install npm install
npm install npm install npm install
#1 Life Reset
F1
Demo
=
https://www.linkedin.com/pulse/why-your-resume-landed-my-trash-stacey-alcorn
sir
1. ( 20 )
2. ( 2000)
3.
SocialStatus
Widget
2
Party
Stackla Life!
5:00
5:00
^^
Reset Success!
Mindset Reset#2
Peer programmingCode review
tag RequireJS
OOP
GruntLiveReload
RequireJS grunt-usemin
DOM Mustache
OOP
GruntLiveReloadRequireJS
Grunt SASS
Git Git Flow
Bug STAC- branch
http://d.pr/y57H
STAC-
master
qa bugs
QA
merge Push QA
GitHub Pull Request Staging Production
V2Event
MustacheOOPAlpacaJS
Widget x 4
Widget
MVP
WidgetEvent
Professional Service
Working Backwards to Technology
Working Backwards to Technology
Stackla
Reset Improved!
#3 Team Reset
UI
SPA
webpack
PHP Layout
JS/CSS
UI
Webpack
Redux
Delegation props
JSX View API Decoration
State State
2000
Object allcontent/index: Object common: Object events/index: Object filters/index: Object hostedhub/index: Object plugins/index: Object report/user: Object report/network: Object data: Array[30] meta: Object
widgets/index: Object
Store #1Redux Single Store -
data - API Object
meta - UI State common -
ex. Tag
Container Component setState
Ducks
ducks-modular-redux
// Actionsconst LOAD = 'my-app/widgets/LOAD';const CREATE = 'my-app/widgets/CREATE';const UPDATE = 'my-app/widgets/UPDATE';const REMOVE = 'my-app/widgets/REMOVE';
// Action Creatorsexport function loadWidgets() { return { type: LOAD };}
export function createWidget(widget) { return { type: CREATE, widget };}
export function updateWidget(widget) { return { type: UPDATE, widget };}
export function removeWidget(widget) { return { type: REMOVE, widget };}
// Reducerexport default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; }}
Jonathan Art Pai
UI react-demo
UI
Demo!
RxJS
RxJS
Promise
RxJS + redux-observable
Redux redux-actions
// Actionsconst LOAD = 'my-app/widgets/LOAD';const CREATE = 'my-app/widgets/CREATE';const UPDATE = 'my-app/widgets/UPDATE';const REMOVE = 'my-app/widgets/REMOVE';
// Action Creatorsexport function loadWidgets() { return { type: LOAD };}
export function createWidget(widget) { return { type: CREATE, widget };}
export function updateWidget(widget) { return { type: UPDATE, widget };}
export function removeWidget(widget) { return { type: REMOVE, widget };}
// Reducerexport default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; }}
import {createAction} from 'redux-actions';
const PREFIX = 'my-app/widgets';
// Action Creatorsexport const loadWidgets = createAction(`${PREFIX}/LOAD`)export const createWidget = createAction(`${PREFIX}/CREATE`);export const updateWidget = createAction(`${PREFIX}/UPDATE`);export const removeWidget= createAction(`${PREFIX}/REMOVE`);
// Reducerexport default const reducer = handleActions({ [loadWidgets]: (state) => {/* do load widget */}});
UI State
reports/aggregate
reports/network
reports/user
reports/tile
report/user: Object report/network: Object common: Object data: Array[30] meta: Object visibleResultsCount: 3
Redux Store #2
Ducks Function
export default function(PREFIX) { return { // Action Creators changeFilters: createAction(`${PREFIX}/CHANGE_FILTERS`), resetFilters: createAction(`${PREFIX}/RESET_FILTERS`), saveReport: createAction(`${PREFIX}/SAVE_REPORT`), // Reducer reducer: combineReducers({ reports: handleActions({ [saveReport]: () => {}, }), options: combineReducers({ filters: handleActions({ [changeFilters]: () => {}, [resetFilters]: () => {}, }) }) }) }};
report/common/redux.js
import commonRedux from './common/redux';const PREFIX = 'reports/user';const { changeFilters, resetFilters, savedReport, reducer,} = commonRedux(PREFIX);
export default combineReducers({ common: reducer, visibleResultsCount: handleAction()});
report/user/redux.js
#1 ESLint
()
Error
#2 CSS Module
CSS
CSS
CSS
.wrapper { background: red;}.tag-box { border: solid 1px #ccc;}
import css from './style.scss';
export default (props) => ( ... );
#3
jsx scroll-box demo.jsx index.jsx style.scss search-box demo.jsx index.jsx style.scss step-progress demo.jsx index.jsx style.scss
JSX jQuery
import, ES6 class)
#4 API
import {Observable} from 'rxjs';
export const TagsAPI = { URL: '/api/tags', create$() { return Observable.ajax({method: 'POST', ...}); } retrieve$() { return Observable.ajax({method: 'GET', ...}); } modify$() { return Observable.ajax({method: 'PUT', ...}); } destroy$() { return Observable.ajax({method: 'DELETE', ...}); }};
CodeMonkey Session
WHY?
Code Review
The Mythical Man Month
1 3
React
Well..
Nice!
Promise
OOP
React/Redux
Store #3
#1 report/user: Object report/network: Object data: Array[30] meta: Object
#2 Redux report/user: Object report/network: Object common: Object data: Array[30] meta: Object visibleResultsCount: 3
#3 model
entities: Object reports: Object models: Object 2f48a879: Object 4c5ed1d5: Object 4fc165f5: Object 5eb92930: Object 7a095e5d: Object
syncing: Object report/user: Object report/network: Object
meta: Object
reports/user/index.jsx reports/user/redux.js
Action Creators Reducer
reports/user/style.scss
#1
reports/common/index.jsx reports/common/redux.jsx
Action Creators Reducer
reports/user/index.jsx reports/user/redux.js
Action Creators Reducer
reports/user/style.scss
#2
common/entities/syncing.js common/entities/sorting.js common/entities/reports/epic.js common/entities/reports/redux.js
Action Creators Reducer Selector Schema
reports/common/index.jsx reports/common/redux.js reports/content/index.jsx reports/content/redux.js
Action Creators Reducer Selector Schema
reports/content/style.scss
#3
normalizr reselect serializr dotDrop
* 3
* 4
ESLint
redux-observable
entities
WTF!
WTF!WTF!WTF!
reselect
Unit TestCSS Modules
serializr
normalizr
Convention
epics
redux-actions
* 3
* 4
ESLint
redux-observable
entities
WTF!
WTF!WTF!WTF!
reselect
Unit TestCSS Modules
serializr
normalizr
Convention
epics
redux-actions
()
https://www.youtube.com/watch?v=mVVNJKv9esE
https://www.youtube.com/watch?v=hlYiWznhhzw
Lib
Team Reset Improving
Front-end Reset#4
HTML
CSS
JavaScript
HTML HTML 1995
WaSP 1998
React 2015
HTMLCSSJS
HTMLCSSJS
HTMLJS
CSS CSS21998
2005 ID2005
2015 CSS Module - 2015
Bootstrap OOCSS2011
()
BEMSUITCSS
()
#ykpmh .hd
.media-object {}
.person__head {}
.person--tall {}
JS Function1998
JavaScript (Web 2.0)2004
Function2015
Johnny Appleseed
Type a quote here.
2016 JavaScript
JS
2016 JavaScript
JS
CSS
JS
JS
CSS
JS
JS
less-loadersass-loader
coffee-loader ts-loader
CSS
JS
JS
less-loadersass-loader
coffee-loader ts-loaderbabel-loader
style-loader
CSS
JS
JS
less-loadersass-loader
coffee-loader ts-loaderbabel-loader
style-loader
=
Q & A
Cheers, mate!