PV247 § Course organization 18.9. Modern JS stack 25.9 React part 1 2.10 React part 2 16.10 Redux 23.10 Promises, router 30.10 Automated tests 6.11 Agile/Scrum 13.11 Lean software development 20.11 ITIL 27.11 Google Ventures sprint 4.12 Modern soft skills 11.12 DevOps §PV247 Modern JS stack §Slavomír Moroz Prerequisites •Html •CSS •Git •HTTP •Methods •Statuses •Query string •Headers •State (cookies, session, local storage) •REST § §PV247 JavaScript basics •Prototypes •Closures •“this” & “arguments” context •Undeclared vs undefined vs null •Function / method invocation •Constructor functions •Curry (apply, call, bind) • • • • §PV247 •JavaScript The Good Parts by Douglas Crockford (first 60 pages) •Functional programming in JavaScript (video) Demo: this + method / function / apply invocation Prototype inheritance + constructor ECMAScript §ECMAScript: A language standardized by ECMA International. §JavaScript: The commonly used name for implementations of the ECMAScript standard. § §ECMAScript 5 (ES5): The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers § §ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers. To see the state of implementation by different browsers and tools, check out these compatibility tables. § §ECMAScript 7 / 2016 §ECMAScript 8 / 2017 §PV247 ES6 new features •Constants, let •Default arguments •String interpolation •Property shorthands •Spread operators •Object & array destructuring •Arrow functions (lambda expressions) •Promises •Classes & class inheritance § §All features - http://es6-features.org § §https://egghead.io/courses/learn-es6-ecmascript-2015 § §PV247 Show and explain these in linked examples or use codepen.io Var vs let, promise examples - https://codepen.io/slavomirm/pen/EXMKLj?editors=1010 § § §PV247 • • • https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f -Vanilla JS je tezko pouzitelny. -Spatne api .. Collections, dom. -Cross browser compatibilita novsich standardov -Spatna typova kontrola a detekce chyb -Synchronni moduly nejde pouzivat v browseru -Za ty roky co je javascript na vzestupu vzniklo obrovske mnozstvi knihoven (npmjs – 340000) -99% odpad -1% to co je dobre -3.5 tisice moznosti jak delat frontend -> neni to tak jednoduche Spousta z toho je toolingu Velka vstupni bariera -Navzdory tomu je vyvoj Front-end aplikaci (SPA) na vzestupu -Duvod -Hlavne Nej UX pro uzivatele -Priklad – Produkty google – Gmail, Photos, Kalendar -Stejne nebo lepsi ux nez desktopove appky §PV247 https://blog.zingchart.com/content/images/2016/06/react-1.png https://qph.ec.quoracdn.net/main-qimg-437e91ee2b145b6ae72be5ef9d041303?convert_to_webp=true https://www.clever-cloud.com/blog/img/medias/npm.png https://avatars1.githubusercontent.com/u/2105791?v=3&s=400 https://raw.githubusercontent.com/babel/logo/master/babel.png Výsledok vyhľadávania obrázkov pre dopyt redux Výsledok vyhľadávania obrázkov pre dopyt eslint §PV247 https://raw.githubusercontent.com/babel/logo/master/babel.png https://babeljs.io -Pouzivame syntax z ECMAScript 2015 ktera neni podporovana v browseru -Babel je JavaScript compiler -Podporuje posledni verzi standard -Kompiluje do ES 5 -> vsechny browser ok -Podporuje pluginy -Napriklad JSX -Ukaz priklad z babeljs.io §React -Pouziva se jako knihovna pro staveni uzivatelskeho rozhrani -Vznikla ve Facebooku -Hodne popularni -Pouziva Facebook, Kentico Draft, Kiwi, Twitter, Uber, … -Zajistuje cross-browser kompatibilitu -Skvely vykon -Pouzitelna i pro vyvoj mobilniho UI §React https://cdn-images-1.medium.com/max/760/1*G6rj2IevhkL3hxDWdFX9cg.png https://facebook.github.io/react/docs/introducing-jsx.html -Jde ruku k ruce s Reactem -Pouziva se vyhradne s reactem -Vtipna syntaxe – neni to HTML ani JavaScript -Je to rozsireni javascriptu -Dava to celkem smysl -Lepe se pise markup -Lepe se v tom orientuje https://codepen.io/collection/DxRWVW/ •JSX – jsx html elements, JS expressions in JSX •Components, state, lifecycle §PV247 CommonJS (Node.js) AMD (Browser) UMD -CommonJs -Every module has it’s own namespace -Avoids global space pollution -Compact syntax -Synchonne nacita moduly -Nepouzitelny v browseru -AMD -Asynchronne nacita moduly – ma to v nazvu -Prvni parameter – zavislosti -Druhy parameter – fukce ktera se zavola jakmile jsou vsechny zavislosti nacteny -Universal Moduler Definition -V realu -CommonJS + Module bundler (webpack) §PV247 modules with dependencies ---webpack---> static assets https://webpack.js.org/concepts/ -takes modules with dependencies and generates static assets representing those modules. -Pouziva loader -Jednim z nich je babel -Dalsi muze byt less loader -Typescript loader -… -Silny plugin system -Minifikace -Proc pouzit webpack misto toho abych primo pouzil babel? -Babel kompiluje soubor po souboru -Webpack usnadnuje development - watch §PV247 http://abdelraoof.com/img/nodejs/node-repl2.png https://qph.ec.quoracdn.net/main-qimg-437e91ee2b145b6ae72be5ef9d041303?convert_to_webp=true •npm init •npm install •npm run … https://www.clever-cloud.com/blog/img/medias/npm.png https://docs.npmjs.com/getting-started/what-is-npm -Node is a program for running JavaScript -Used by everyone who writes some javascript -Server, tooling -Show node interpreting some commands -Npm is package manager … -Show npm site, pakcges… -Install webpack as local package npm install --save-dev webpack -explain devdependencies, add build script (webpack command from bin folder), webpack config (go to page webpack concepts), perform build -npm install --save-dev babel-loader babel-core babel-preset-env -npm install --save react react-dom -npm install --save-dev babel-plugin-transform-react-jsx -Config babel loader, babel react plugin, -Create app.jsx, edit html add script to the end §PV247 Výsledok vyhľadávania obrázkov pre dopyt eslint tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. http://eslint.org/docs/user-guide/getting-started npm install eslint --save-dev ./node_modules/.bin/eslint –init npm install eslint-loader --save-dev •loaders order in webpack config •Extends, react plugin •Eslint integration with IDE •Eslint rule disable for temp debug code Debug §When debugging in a browser, how to tell where the original code is? § •Source maps •Mapping between the original and the transformed source code. •Inline •Add the mapping data directly to the generated files. •Thanks to their speed, inline source maps are ideal for development. •Separate •Emit the mapping data to separate source map files and link the original source to them using a comment. •Given they make the bundles big, separate source maps are the preferable solution for production. • §It's possible you don't want to generate a source map for your production bundle as this makes it effortless to inspect your application. By disabling them you are performing a sort of obfuscation. § §[Chrome] Search in source files: CTRL + P § § §https://survivejs.com/webpack/building/source-maps §https://webpack.js.org/configuration/devtool/ § §PV247 •Show app.js in web tools •Configure source maps and environments (dev, production) Minification •process of removing all characters that are not necessary from the Javascript source code § • • • • • • • §UglifyJS Webpack Plugin §https://github.com/webpack-contrib/uglifyjs-webpack-plugin §PV247 •Configure uglify •Webpack watch Resources §https://github.com/facebookincubator/create-react-app § §PV247 Open create react app, show features