欲使伊朗石油出口归零 美 极限施压 升级 · 欲使伊朗石油出口归零,美“极限施压”升级 本报见习记者陆依斐 在美国退出伊核协议一周年之际,美伊关
不断归零的前端人生 - 2016 中国软件开发者大会
-
Upload
joseph-chiang -
Category
Technology
-
view
2.190 -
download
2
Transcript of 不断归零的前端人生 - 2016 中国软件开发者大会
-
@
-
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!