1. Tools
1.1. npm
1.1.1. Nexus Repository Manager
1.2. Lerna
1.2.1. lerna bootstrap
1.2.2. lerna publish
1.3. (Gulp)
1.3.1. gulp build
2. Applikasjon
2.1. React
2.1.1. React Router
2.1.2. React Developer Tools
2.1.3. react-helmet
2.1.4. react.slick
2.2. Redux
2.2.1. ReduxSaga
2.2.2. Devtools Extension
2.3. Fetch
2.3.1. isomorphic-fetch
3. CSS
3.1. css-modules
3.2. sass (scss)
3.3. class-names
3.4. reset
3.4.1. bootstrap reset
3.4.2. bootstrap reboot
4. Testing
4.1. unit/testing
4.1.1. rammeverk
4.1.1.1. mochajs
4.1.1.1.1. ignore-styles
4.1.1.1.2. babel-register
4.1.1.2. helpers
4.1.1.2.1. assert
4.1.1.2.2. moching/stubbing
4.1.1.2.3. komponenttesting
4.1.2. covrage
4.1.2.1. Istanbul Code Coverage
4.1.2.1.1. nyc
4.1.3. testrunner
4.1.3.1. wallaby
4.1.3.1.1. IntelliJ plugin
4.1.3.1.2. Visual Studio plugin
4.1.3.1.3. Atom plugin
4.1.3.1.4. Sublime Text plguin
4.1.3.1.5. wallaby-webpack
4.1.3.2. karma
4.1.3.2.1. karma-mocha
4.1.3.2.2. karma-mocha-reporter"
4.1.3.2.3. karma-webpack
4.1.3.2.4. karma-chrome-launcher
4.2. ende til ende
4.2.1. nightwatch
4.2.1.1. Selenium/WebDriver
4.3. Issues
4.3.1. babel-register vs ignore
5. Webserver
5.1. prod
5.1.1. express
5.2. dev
5.2.1. webpack-dev-server (hot-reload)
5.2.2. express (serverside-render)
6. Måter å kjøre
6.1. prod
6.1.1. git clone ssh://[email protected]:7999/ow/omniweb.git
6.1.1.1. node /packages/app-web/lib/main.js
6.1.2. npm install app-web
6.1.2.1. node node_modules/app-web/lib/main.js
6.2. dev
6.2.1. git clone ssh://[email protected]:7999/ow/omniweb.git
6.2.1.1. npm run setup
6.2.1.2. cd packages/app-web
6.2.1.3. npm run build
6.2.1.4. npm start
7. ?
7.1. filnavn på komponent
7.1.1. ?
7.1.1.1. MyComponent
7.1.1.1.1. MyComponent.jsx
7.1.1.1.2. MyComponent.test.jsx
7.1.1.1.3. MyComponent.scss
7.1.1.2. MyComponent
7.1.1.2.1. index.jsx
7.1.1.2.2. index.test.jsx
7.1.1.2.3. style.css
7.1.2. bør gjøre det konsekvent alle plasser
7.1.2.1. (inkludert på plasser som server/index.js)
7.2. best practice
7.2.1. pure components
7.2.2. connect vs bindActionCreators
7.2.3. CSS components
7.2.3.1. standard
8. Bundling
8.1. Webpack 2
8.1.1. Tips
8.1.1.1. react-scripts
8.1.2. Plugins
8.1.2.1. Hot Module Reload
8.1.2.1.1. React
8.1.2.2. HardSourceWebpackPlugin
8.1.2.3. Service Worker
8.1.2.3.1. hjs-webpack (webpack)
8.1.3. Settings
8.1.3.1. base
8.1.3.1.1. dev-client
8.1.3.1.2. dev-server
8.1.3.1.3. prod-server
8.1.3.1.4. prod-server
8.2. Babel
8.2.1. Presets
8.2.1.1. es2015
8.2.1.1.1. check-es2015-constants
8.2.1.1.2. transform-es2015-arrow-functions
8.2.1.1.3. transform-es2015-block-scoped-functions
8.2.1.1.4. transform-es2015-block-scoping
8.2.1.1.5. transform-es2015-classes
8.2.1.1.6. transform-es2015-computed-properties
8.2.1.1.7. transform-es2015-destructuring
8.2.1.1.8. transform-es2015-duplicate-keys
8.2.1.1.9. transform-es2015-for-of
8.2.1.1.10. transform-es2015-function-name
8.2.1.1.11. transform-es2015-literals
8.2.1.1.12. transform-es2015-modules-commonjs
8.2.1.1.13. transform-es2015-object-super
8.2.1.1.14. transform-es2015-parameters
8.2.1.1.15. transform-es2015-shorthand-properties
8.2.1.1.16. transform-es2015-spread
8.2.1.1.17. transform-es2015-sticky-regex
8.2.1.1.18. transform-es2015-template-literals
8.2.1.1.19. transform-es2015-typeof-symbol
8.2.1.1.20. transform-es2015-unicode-regex
8.2.1.1.21. transform-regenerator
8.2.1.2. es2016
8.2.1.2.1. transform-exponentiation-operator
8.2.1.3. es2017
8.2.1.3.1. syntax-trailing-function-commas
8.2.1.3.2. transform-async-to-generator
8.2.1.4. react
8.2.1.4.1. preset-flow
8.2.1.4.2. syntax-jsx
8.2.1.4.3. transform-react-jsx
8.2.1.4.4. transform-react-display-name
8.2.1.5. env/latest
8.2.2. Stages
8.2.2.1. stage-3 - Candiate
8.2.2.1.1. transform-object-rest-spread
8.2.2.1.2. transform-async-generator-functions
8.2.2.1.3. syntax-trailing-function-commas
8.2.2.1.4. ransform-async-to-generator
8.2.2.1.5. transform-exponentiation-operator
8.2.2.2. stage-2 - Draft
8.2.2.2.1. syntax-dynamic-import
8.2.2.2.2. transform-class-properties
8.2.2.3. stage-1 - Proposal
8.2.2.3.1. ransform-export-extensions
8.2.2.3.2. ransform-class-constructor-call
8.2.2.4. stage-0 - Strawman
8.2.2.4.1. transform-do-expressions
8.2.2.4.2. transform-function-bind
8.2.3. Plugins
8.2.3.1. (se Presets og Stages)
8.3. .babelrc
8.3.1. presets
8.3.1.1. latest
8.3.1.2. react
8.3.1.3. stage-0
8.3.2. env
8.3.2.1. test
8.3.2.1.1. babel-plugin-istanbul
8.3.2.2. development
8.3.2.2.1. babel-plugin-transform-react-jsx-source
8.3.2.2.2. react-hot-loader/babel
8.3.2.3. production
8.3.2.3.1. babel-plugin-transform-react-remove-prop-types
8.3.2.3.2. babel-plugin-transform-react-constant-elements
8.3.2.3.3. babel-plugin-transform-react-inline-elements
9. Bundle
9.1. React
9.1.1. 132K
9.2. Redux-Saga
9.2.1. 30.4K
9.3. React DOM
9.3.1. 706B
9.4. Redux
9.4.1. 5.3K
10. omniweb
10.1. packages
10.1.1. nt-components
10.1.1.1. src
10.1.1.1.1. components
10.1.2. nt-header
10.1.3. nt-menu
10.1.4. nt-insta
10.1.4.1. src
10.1.4.1.1. components
10.1.4.1.2. containers
10.1.4.1.3. state
10.1.4.1.4. views
10.1.4.1.5. page
10.1.5. nt-lotto
10.1.6. app-web
10.1.6.1. src
10.1.6.1.1. components
10.1.6.1.2. public
10.1.6.1.3. run
10.1.6.1.4. state
10.1.6.1.5. styles
10.1.6.1.6. utils
10.1.6.1.7. views
10.1.6.2. webpack.base.config.js
10.1.6.2.1. webpack.dev.client.js
10.1.6.2.2. webpack.dev.server.js
10.1.6.2.3. webpack.prod.client.js
10.1.6.2.4. webpack.prod.server.js
10.2. nightwish
11. mob
11.1. react
11.1.1. account
11.1.2. articles
11.1.2.1. components
11.1.2.1.1. article
11.1.2.1.2. article-list
11.1.2.1.3. article-section
11.1.2.2. redux
11.1.2.3. test
11.1.2.4. api.js
11.1.2.5. index.js
11.1.3. common
11.1.4. ext
11.1.5. html
11.1.6. lottery
11.1.6.1. eurojackpot
11.1.6.1.1. js
11.1.7. luckycoupon
11.1.8. mybets
11.1.9. payment
11.1.10. prize-pots
11.1.11. router
11.1.12. sport
11.1.13. video
11.1.14. webview
11.1.15. global.less
11.1.16. RouterMobile.jsx
11.1.17. RouterTablet.jsx
11.1.18. webpack*.js
12. Avklaringer
12.1. SKal vi ha immutable js ?
12.1.1. nope
12.1.1.1. Immutable JS: worth the cost?
12.1.1.1.1. We discussed all the points above and concluded that the only benefit of ‘Immutable’ was a means of enforcing immutability, but what is the point
12.1.1.1.2. " I was at one point doing a lodash deepClone on my 75,000 prop JS object. Switching that out for Immutable.js made a big difference."
12.1.1.2. 10 things I learned making the fastest site in the world
12.1.1.2.1. "This is not because ImmutableJS is ‘slow’. It could have been 19KB of any JavaScript. It’s simply the time taken to parse it."
12.1.2. yup
12.2. Undersøk
12.2.1. Hva skjer på serversiden når man oppdater?
12.2.2. prod
13. State
13.1. kongkasino
13.1.1. page
13.1.2. header
13.1.3. showroom
13.1.4. games
13.1.4.1. {a: A, b: B, c: C}
13.1.5. categories
13.1.5.1. anbefalt
13.1.5.1.1. [c, b, c]
13.1.5.2. hjulspill
13.1.5.2.1. [c, d, e]
13.1.5.3. bordspill
13.1.5.3.1. [g, h, i]
13.1.5.4. andre spill
13.1.5.4.1. [o, f, e]
13.1.5.5. spill med jackpot
13.1.5.5.1. [c, d]
13.1.5.6. mine favoritter
13.1.5.6.1. [x, y, z]
13.1.5.7. sist spilte
13.1.5.7.1. [m, d, r]
14. Images
14.1. desktop
14.1.1. giga
14.1.1.1. w: 1440
14.1.1.2. h: 637
14.1.2. big
14.1.2.1. w: 672
14.1.2.2. h: 378
14.1.3. normal
14.1.3.1. w: 329
14.1.3.2. h: 185
14.2. mobile
14.2.1. normal
14.2.1.1. w: 329
14.2.1.2. h: 185
15. Carousel
15.1. react-slick
16. UX
16.1. fontstørrelser
16.1.1. alt 1
16.1.1.1. $font-size-base $font-size-lg $font-size-sm $font-size-xs
16.1.2. alt 2
16.1.2.1. $fz-10 = .625rem; $fz-12 = .75rem; $fz-14 = .875rem; $fz-16 = 1rem; $fz-base = $fz-16; $fz-18 = 1.125rem; $fz-20 = 1.25rem; $fz-24 = 1.5rem; $fz-28 = 1.75rem; $fz-30 = 1.875rem; $fz-32 = 2rem;
16.2. padding
16.2.1. alt 1
16.2.1.1. padUnit
16.2.1.1.1. x1
16.2.1.1.2. x2
16.2.1.1.3. x3
16.2.1.1.4. x4
16.2.2. alt 2
16.2.2.1. xs
16.2.2.1.1. 4px / 0.25 rem
16.2.2.2. sm
16.2.2.2.1. 8px / 0.5 rem
16.2.2.3. md
16.2.2.3.1. 12px / 0.75 rem
16.2.2.4. lg
16.2.2.4.1. 16 px / 1 rem
16.2.2.5. xl
16.2.2.5.1. 20 px / 1.25rem
17. Login
17.1. iframe
17.1.1. ladnngsside
17.2. nativ til kons
17.2.1. client.js
17.3. eget gui mobil
17.3.1. FNr/OTP