不断归零的前端人生 - 2016 中国软件开发者大会

2005.10

2009.09

2013.06

2014.02

2010 WebRebuild

2011 SDCC

Stackla

2014.5

Now

Startup

Stackla2015 2015

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

1. ( 20 )

2. ( 2000)

3.

SocialStatus

Widget

2

Party

Stackla Life!

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

WidgetEvent

Professional Service

Working Backwards to Technology

Working Backwards to Technology

Stackla

Reset Improved!

#3 Team Reset

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

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


reports/user/index.jsx reports/user/redux.js


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

CSS

JS

JS

CSS

JS

JS

less-loadersass-loader

coffee-loader ts-loader

CSS

JS

JS


coffee-loader ts-loaderbabel-loader

style-loader

CSS

JS

JS


coffee-loader ts-loaderbabel-loader

style-loader

=

Cheers, mate!