Webpack & NPM

NPM

http://npmjs.com

// hvis pakken skal bruges af componenter brug:
$ npm install --save PACKAGENAME

// hvis pakken skal bruges i build-processen:
$ npm install --save-dev PACKAGENAME

Webpack

Ny frontend struktur

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Bruges til config af webpack procesen
 

tools indeholder en mini-express-server der bruges når vi kører "watch" processen når der arbejdes på frontend.

templates indeholder nogle filer der bruges til hhv. watch og compile-faserne.

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Styles er til generiske styles, ting der gælder for hele sitet.

Der er desuden en import.scss som bruges i de forskellige components så deres SCSS-filer har adgang til de forskellige variabler og mixins vi bruger

Det er vigtigt at variabel-deklarationerne sker i filer for sig så de kan importeres uden at indholdet dubleres hver gang import.scss inkluderes. 

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

main.js starter vores, det er vores main-entry i webpack.

Her inkluderes vores routes og stores.

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Her defineres vores routes.

På FWA har jeg lige nu alle routes i en fil, som samtidig inkluderer en række helper-funktioner til at generere korrekte URLs.

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Constants indeholder filer der exporter en masse constants som bruges på tværs af APP'en, fx i kald mellem vores actions og stores.

Utils indeholder funktionsbiblioteker der skal bruges på tværs af komponenter.

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Bruges til highlevel React komponenter, dvs. componenter der udgør hele sidetyper, som "container" andre komponenter.

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Redux Actions og Stores.

Vi kører Flux-arkitektur, dvs. vores data flyder kun én vej i vores app, det gør det lettere at holde styr på state'en.

Struktur

/_tools/

/actions/

/components/

/constants/

/containers/

/reducers/

/routes/

/styles/
/templates/
/utils/
/main.js

Indeholder alle de mindre komponenter som vores app er bygget op af.

Har vi en "header.js" så har i samme niveau en "header.scss" som indeholder componentets styles.

React
LifeCycle Methods

render

getInitialState

getDefaultProps

propTypes

mixins

statics

displayName

Generelt

...med ES6 er det lidt anderledes

render

getInitialState

getDefaultProps

propTypes

mixins

statics

displayName

Generelt

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

Mounting

componentWillUnmount

UnMounting

Flux

Flux - w/ Redux

DataFlow

Store

Smart Comp.

Comp2

Comp1

Comp3

Comp2-1

Store

(Reducer)

View

(RootComp)

User Interaction

Action