Get Started. It's Free
or sign up with your email address
Rocket clouds
OmniWeb by Mind Map: OmniWeb

1. ?

1.1. filnavn på komponent

1.1.1. ?

1.1.1.1. MyComponent

1.1.1.1.1. MyComponent.jsx

1.1.1.1.2. MyComponent.test.jsx

1.1.1.1.3. MyComponent.scss

1.1.1.2. MyComponent

1.1.1.2.1. index.jsx

1.1.1.2.2. index.test.jsx

1.1.1.2.3. style.css

1.1.2. bør gjøre det konsekvent alle plasser

1.1.2.1. (inkludert på plasser som server/index.js)

1.2. best practice

1.2.1. pure components

1.2.2. connect vs bindActionCreators

1.2.3. CSS components

1.2.3.1. standard

2. Tools

2.1. npm

2.1.1. Nexus Repository Manager

2.2. Lerna

2.2.1. lerna bootstrap

2.2.2. lerna publish

2.3. (Gulp)

2.3.1. gulp build

3. Bundling

3.1. Webpack 2

3.1.1. Tips

3.1.1.1. react-scripts

3.1.2. Plugins

3.1.2.1. Hot Module Reload

3.1.2.1.1. React

3.1.2.2. HardSourceWebpackPlugin

3.1.2.3. Service Worker

3.1.2.3.1. hjs-webpack (webpack)

3.1.3. Settings

3.1.3.1. base

3.1.3.1.1. dev-client

3.1.3.1.2. dev-server

3.1.3.1.3. prod-server

3.1.3.1.4. prod-server

3.2. Babel

3.2.1. Presets

3.2.1.1. es2015

3.2.1.1.1. check-es2015-constants

3.2.1.1.2. transform-es2015-arrow-functions

3.2.1.1.3. transform-es2015-block-scoped-functions

3.2.1.1.4. transform-es2015-block-scoping

3.2.1.1.5. transform-es2015-classes

3.2.1.1.6. transform-es2015-computed-properties

3.2.1.1.7. transform-es2015-destructuring

3.2.1.1.8. transform-es2015-duplicate-keys

3.2.1.1.9. transform-es2015-for-of

3.2.1.1.10. transform-es2015-function-name

3.2.1.1.11. transform-es2015-literals

3.2.1.1.12. transform-es2015-modules-commonjs

3.2.1.1.13. transform-es2015-object-super

3.2.1.1.14. transform-es2015-parameters

3.2.1.1.15. transform-es2015-shorthand-properties

3.2.1.1.16. transform-es2015-spread

3.2.1.1.17. transform-es2015-sticky-regex

3.2.1.1.18. transform-es2015-template-literals

3.2.1.1.19. transform-es2015-typeof-symbol

3.2.1.1.20. transform-es2015-unicode-regex

3.2.1.1.21. transform-regenerator

3.2.1.2. es2016

3.2.1.2.1. transform-exponentiation-operator

3.2.1.3. es2017

3.2.1.3.1. syntax-trailing-function-commas

3.2.1.3.2. transform-async-to-generator

3.2.1.4. react

3.2.1.4.1. preset-flow

3.2.1.4.2. syntax-jsx

3.2.1.4.3. transform-react-jsx

3.2.1.4.4. transform-react-display-name

3.2.1.5. env/latest

3.2.2. Stages

3.2.2.1. stage-3 - Candiate

3.2.2.1.1. transform-object-rest-spread

3.2.2.1.2. transform-async-generator-functions

3.2.2.1.3. syntax-trailing-function-commas

3.2.2.1.4. ransform-async-to-generator

3.2.2.1.5. transform-exponentiation-operator

3.2.2.2. stage-2 - Draft

3.2.2.2.1. syntax-dynamic-import

3.2.2.2.2. transform-class-properties

3.2.2.3. stage-1 - Proposal

3.2.2.3.1. ransform-export-extensions

3.2.2.3.2. ransform-class-constructor-call

3.2.2.4. stage-0 - Strawman

3.2.2.4.1. transform-do-expressions

3.2.2.4.2. transform-function-bind

3.2.3. Plugins

3.2.3.1. (se Presets og Stages)

3.3. .babelrc

3.3.1. presets

3.3.1.1. latest

3.3.1.2. react

3.3.1.3. stage-0

3.3.2. env

3.3.2.1. test

3.3.2.1.1. babel-plugin-istanbul

3.3.2.2. development

3.3.2.2.1. babel-plugin-transform-react-jsx-source

3.3.2.2.2. react-hot-loader/babel

3.3.2.3. production

3.3.2.3.1. babel-plugin-transform-react-remove-prop-types

3.3.2.3.2. babel-plugin-transform-react-constant-elements

3.3.2.3.3. babel-plugin-transform-react-inline-elements

4. Applikasjon

4.1. React

4.1.1. React Router

4.1.2. React Developer Tools

4.1.3. react-helmet

4.1.4. react.slick

4.2. Redux

4.2.1. ReduxSaga

4.2.2. Devtools Extension

4.3. Fetch

4.3.1. isomorphic-fetch

5. CSS

5.1. css-modules

5.2. sass (scss)

5.3. class-names

5.4. reset

5.4.1. bootstrap reset

5.4.2. bootstrap reboot

6. Testing

6.1. unit/testing

6.1.1. rammeverk

6.1.1.1. mochajs

6.1.1.1.1. ignore-styles

6.1.1.1.2. babel-register

6.1.1.2. helpers

6.1.1.2.1. assert

6.1.1.2.2. moching/stubbing

6.1.1.2.3. komponenttesting

6.1.2. covrage

6.1.2.1. Istanbul Code Coverage

6.1.2.1.1. nyc

6.1.3. testrunner

6.1.3.1. wallaby

6.1.3.1.1. IntelliJ plugin

6.1.3.1.2. Visual Studio plugin

6.1.3.1.3. Atom plugin

6.1.3.1.4. Sublime Text plguin

6.1.3.1.5. wallaby-webpack

6.1.3.2. karma

6.1.3.2.1. karma-mocha

6.1.3.2.2. karma-mocha-reporter"

6.1.3.2.3. karma-webpack

6.1.3.2.4. karma-chrome-launcher

6.2. ende til ende

6.2.1. nightwatch

6.2.1.1. Selenium/WebDriver

6.3. Issues

6.3.1. babel-register vs ignore

7. Webserver

7.1. prod

7.1.1. express

7.2. dev

7.2.1. webpack-dev-server (hot-reload)

7.2.2. express (serverside-render)

8. Bundle

8.1. React

8.1.1. 132K

8.2. Redux-Saga

8.2.1. 30.4K

8.3. React DOM

8.3.1. 706B

8.4. Redux

8.4.1. 5.3K

9. Måter å kjøre

9.1. prod

9.1.1. git clone ssh://[email protected]:7999/ow/omniweb.git

9.1.1.1. node /packages/app-web/lib/main.js

9.1.2. npm install app-web

9.1.2.1. node node_modules/app-web/lib/main.js

9.2. dev

9.2.1. git clone ssh://[email protected]:7999/ow/omniweb.git

9.2.1.1. npm run setup

9.2.1.2. cd packages/app-web

9.2.1.3. npm run build

9.2.1.4. npm start

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