Dezvoltarea Aplicațiilor Web La Nivel De Client
Total Page:16
File Type:pdf, Size:1020Kb
inginerie inginerie Dezvoltarea Dezvoltarea aplicațiilor Web software în contextulsoftware la niveldeclient JavaScript Dr. Sabin Buragaprofs.info.uaic.ro/~busaco busaco ~ “There are two ways to write error-free programs; / only the third one works.” profs.info.uaic.ro Alan J. Perlis Dr. Sabin Sabin Buraga Dr. busaco ~ / Ce instrumente software și biblioteci JS pot fi folosite în contextul programării Web profs.info.uaic.ro la nivel de client? Dr. Sabin Sabin Buraga Dr. instrumente busaco ~ / Editare de cod și dezvoltare de aplicații Web Depanare profs.info.uaic.ro Testare Documentare a codului Compresie Optimizare Sabin Buraga Dr. instrumente: editare busaco ~ / Editoare + medii integrate (IDE) pentru desktop: Atom Editor, Brackets, JS Development Tools (Eclipse), Sublime Text, Visual Studio Code, WebStorm etc. profs.info.uaic.ro Disponibile pe Web – în cloud: Cloud9 IDE, Codepen, Codio, JS Bin, JS Fiddle, Plunker,… Dr. Sabin Sabin Buraga Dr. unele oferă și partajarea codului-sursă cu alți dezvoltatori a se considera și github.com/sorrycc/awesome-javascript#editors instrumente: depanare busaco ~ / Utilizarea consolei JS obiectul console oferit de browser profs.info.uaic.ro console.spec.whatwg.org (Living Standard, 25 oct. 2018) metode utile: log (), error (), warn (), info (), assert (), time (), timeEnd (), trace (), group (), groupEnd (), table (), dir (), dirxml () Sabin Buraga Dr. developer.mozilla.org/Web/API/Console instrumente: depanare busaco ~ / profs.info.uaic.ro de studiat și M. Burgess, Beyond console.log(), nov. 2018 medium.com/@mattburgess/beyond-console-log-2400fdf4a9d8 Dr. Sabin Sabin Buraga Dr. instrumente: depanare busaco ~ / Instrumentele de depanare profs.info.uaic.ro incluse în navigatoarele Web moderne: developers.google.com/web/tools/chrome-devtools/ developer.mozilla.org/docs/Tools docs.microsoft.com/en-us/microsoft-edge/devtools-guide developer.apple.com/safari/tools/ Dr. Sabin Sabin Buraga Dr. disponibile ca proxy – exemplu: Telerik Fiddler – www.telerik.com/fiddler inspecție de variabile instrumente(watch) : depanarestiva apelurilor domeniu de (call stack) busaco vizibilitate ~ / (scope) puncte de profs.info.uaic.ro oprire (breakpoints) puncte de oprire vizând transferuri asincrone, DOM, Dr. Sabin Sabin Buraga Dr. evenimente,… medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff instrumente: testare busaco ~ / Verificarea corectitudinii codului JavaScript profs.info.uaic.ro construcția "use strict"; indică interpretorului că se va utiliza varianta strictă a limbajului disponibilă începând cu ECMAScript versiunea 5 Dr. Sabin Sabin Buraga Dr. developer.mozilla.org/Web/JavaScript/Reference/Strict_mode instrumente: testare busaco ~ / Verificarea corectitudinii codului JavaScript profs.info.uaic.ro erorile de programare (e.g., crearea accidentală a variabilelor globale, nume identice de proprietăți etc.) vor conduce la emiterea de excepții Dr. Sabin Sabin Buraga Dr. instrumente: testare busaco ~ / Verificarea corectitudinii codului JavaScript profs.info.uaic.ro sunt interzise diverse facilități: numere exprimate în baza 8, folosirea construcțiilor with, arguments.callee etc. Dr. Sabin Sabin Buraga Dr. instrumente: testare busaco ~ / Modul de procesare strict: profs.info.uaic.ro modifică semantica programelor este implicit folosit pentru modulele de cod ES6 module code is always strict mode code Dr. Sabin Sabin Buraga Dr. nu este impus de vreun browser Web "use strict"; instrumente: testare varAiurea = "Ah!"; busaco obiect = {prop: 1, prop: true}; ~ / // eroare de sintaxă console.error (varAiurea); profs.info.uaic.ro Verificare statică a codului JSLint – www.jslint.com Dr. Sabin Sabin Buraga Dr. a se consulta și github.com/douglascrockford/JSLint instrumente: testare busaco ~ / Verificare statică a codului profs.info.uaic.ro alte instrumente utile: JSHint – www.jshint.com ESHint – eslint.org JS Inspect (detects copy-pasted & structurally similar code) github.com/danielstjules/jsinspect Sabin Buraga Dr. instrumente : testare opțiuni JSHint Dr. Sabin Buragaprofs.info.uaic.ro/~busaco instrumente: testare busaco ~ / Suport pentru testare, inclusiv unit testing profs.info.uaic.ro exemplificări: AVA, Cypress, dom-testing-library, Flow, Jasmine, Jest, Mocha, PhantomJS, Qunit, Sinon.js, Tape, TestCafe etc. github.com/sorrycc/awesome-javascript#testing-frameworks Dr. Sabin Sabin Buraga Dr. de studiat și Let’s Code: Test-Driven JavaScript www.letscodejavascript.com instrumente: testare busaco ~ / Testare cross-browser a aplicațiilor Web profs.info.uaic.ro exemple: Browsera – www.browsera.com Browserling – www.browserling.com Browser Sandbox – turbo.net/browsers Browser Shots – browsershots.org Sabin Buraga Dr. instrumente: documentarea codului busaco ~ / Standarde de redactare a codului JavaScript profs.info.uaic.ro exemplificări: Code Conventions for JavaScript www.crockford.com/javascript/code.html Principles of Writing Consistent, Idiomatic JavaScript github.com/rwaldron/idiomatic.js Sabin Buraga Dr. instrumente: documentarea codului busaco ~ / Standarde de redactare a codului JavaScript profs.info.uaic.ro ghiduri specifice – câteva exemple: Airbnb JavaScript Style Guide github.com/airbnb/javascript Google JavaScript Style Guide google.github.io/styleguide/jsguide.html Sabin Buraga Dr. React Native Code Style facebook.github.io/react-native/docs/style.html instrumente: documentarea codului busaco ~ / Standarde de redactare a codului JavaScript profs.info.uaic.ro instrumente utile (formatatoare a codului-sursă): JS Beautifier – jsbeautifier.org Prettier – prettier.io esformatter – github.com/millermedeiros/esformatter Dr. Sabin Sabin Buraga Dr. define ('my/toy', function () { marcaje (adnotări) speciale /** în cadrul comentariilor: * A module representing a toy. * @exports my/toy @abstract @author * @version 1.0 @access @copyright busaco */ ~ @alias @license / var toy = { @async @summary /** A property of the module. */ @extends @description color: "black", @class @version @interface @example /** @constructor */ @callback @since @event @see profs.info.uaic.ro Toy: function(size) { /** A property of the class. */ @emits @todo this.size = size; @listens @deprecated } @function @property }; @module return toy; @requires Sabin Buraga Dr. }); … documentarea codului: JSDoc Toolkit – usejsdoc.org instrumente: compresie de cod busaco ~ / Instrumente privind compresia/minimizarea profs.info.uaic.ro exemple: Javascript Compressor – javascriptcompressor.com Minify – www.minifier.org UglifyJS (Mihai Bazon, absolvent FII) – lisperator.net/uglifyjs/ Dr. Sabin Sabin Buraga Dr. instrumente: optimizare javascript busaco ~ / Transformarea codului JS într-unul optimizat profs.info.uaic.ro exemple: Closure Compiler – developers.google.com/closure/ Optimize – github.com/nolanlawson/optimize-js Dr. Sabin Sabin Buraga Dr. detalii într-un curs separat instrumente: pachete busaco ~ / Managementul de pachete JavaScript pentru dezvoltarea de aplicații Web la nivel de client profs.info.uaic.ro căutare, instalare, compilare, verificare a dependențelor exemple: Bower, jspm, npm, Yarn etc. Sabin Buraga Dr. github.com/sorrycc/awesome-javascript#package-managers instrumente: pachete busaco ~ / Managementul de pachete JavaScript pentru dezvoltarea de aplicații Web la nivel de client profs.info.uaic.ro crearea de conglomerate de cod/resurse (bundles) exemplificări: browserify, Rollup (specific ES6), webpack Sabin Buraga Dr. github.com/sorrycc/awesome-javascript#bundlers instrumente: fluxuri de activități busaco ~ / Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat profs.info.uaic.ro exemple: Brunch, Grunt, Yeoman, Phantom.js, Plop, Selenium Sabin Buraga Dr. instrumente: machete de redare busaco ~ / Sisteme de management al machetelor de redare a conținutului (templating engines) profs.info.uaic.ro exemplificări: Dust.js, EJS, Handlebars, Mustache.js,… Sabin Buraga Dr. github.com/sorrycc/awesome-javascript#templating-engines instrumente: programare busaco ~ / Biblioteci pentru programarea funcțională profs.info.uaic.ro Lodash – lodash.com Ramda – ramdajs.com Underscore – underscorejs.org Dr. Sabin Sabin Buraga Dr. resurse de interes la github.com/stoeffel/awesome-fp-js instrumente: programare busaco ~ / Biblioteci pentru programarea reactivă profs.info.uaic.ro vizează procesarea fluxurilor de date asincrone pe baza paradigmei funcționale adoptă șablonul de proiectare Observer Dr. Sabin Sabin Buraga Dr. www.learnrxjs.io instrumente: programare busaco ~ / Biblioteci pentru programarea reactivă profs.info.uaic.ro exemple: RxJS – github.com/ReactiveX/rxjs Cycle – cycle.js.org MobX – mobx.js.org Most.js – github.com/cujojs/most Sabin Buraga Dr. instrumente busaco ~ / Suport pentru creșterea performanței profs.info.uaic.ro asm.js (Mozilla, 2012—2014) subset JavaScript ce poate fi utilizat ca limbaj de nivel scăzut, eficient – în spiritul limbajului de asamblare rulează nativ în Chrome, Edge și Firefox Sabin Buraga Dr. asmjs.org instrumente busaco ~ / Suport pentru creșterea performanței profs.info.uaic.ro WebAssembly – wasm (în lucru, 20 noiembrie 2018) limbaj de programare proiectat pentru execuție eficientă la nivel de (browser) Web safe, portable, low-level code format Sabin Buraga Dr. webassembly.org developer.mozilla.org/WebAssembly instrumente busaco ~ / Suport pentru creșterea performanței profs.info.uaic.ro WebAssembly – wasm include un set restrâns de tipuri de date și operații permite optimizări la momentul compilării axat