inginerie software software în contextul inginerie Dr. Sabin Full - Stack Corneliu Buraga Web – profs.info.uaic.ro/~ Development
JavaScript pics.me.me/story-of-every-project-after-3-months-initial-work-plan-57930917.png busaco /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco “ There There are twoways to write error only the third one works. Alan J. Perlis - free programs; ”
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pot fi Ce instrumente folosite î n contextul software program ș i biblioteci ă rii Web? JS
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Editare de cod Documentare instrumente și Optimizare Compresie dezvoltare Depanare Testare a codului de aplica ț ii Web
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Ace (Ajax.org Cloud (Ajax.org Ace Sublime Text Sublime CodeLite github.com/ Editoare + Editoare medii integrate(IDE) , instrumente Komodo , sorrycc Visual Studio Studio (Code) Visual a se 9 , JS DevelopmentTools Editor) / considera awesome , : Atom editare - javascript#editors și , Editor WebStorm : , Brackets (Eclipse) e tc . , ,
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco unele Cloud ofer 9 IDE ă , ș Codepen i Disponibile partajarea instrumente , JS Bin codului pe pe Web , JS Fiddle : - surs editare – în ă , cloud Plunker cu al cu : ț i dezvoltatori , REPL.it , …
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco console.spec.whatwg.org metode time () obiectul instrumente , utile: utile: timeEnd console Utilizarea log () table () () , , oferit trace () error () , ( dir Living Standard Living consolei () de : , , , group group () dirxml warn () depanare mediul () , , JS info info () groupEnd de , august execu , assert ție () 2019 , () , )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco în contextul Node.js: modulul preinstalat preinstalat Node.js: modulul în contextul obiectul developer.mozilla.org/Web/API/Console instrumente console nodejs.org/ Utilizarea la nivelde oferit api browser consolei de /console.html : depanare mediul Web JS de execu console ție
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco medium.com/@ de studiat și de studiat M. instrumente mattburgess Burgess /beyond , Beyond : depanare - console console.log() - log - 2400 , 2018 fdf 4 a 9 d 8
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco docs.microsoft.com/en docs.microsoft.com/ developers.google.com/web/tools/chrome incluse instrumente Instrumentele developer.apple.com/safari/tools/ developer.mozilla.org/docs/Tools î n navigatoare - us/microsoft en - us/ microsoft : de - edge/devtools le depanare Web depanare - edge/ moderne: devtools - devtools - guide - guide - chromium /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco medium.com/ datadriveninvestor instrumente /stopping ( inspec domeniu de breakpoints vizibilitate puncte de variabile ( ( oprire - watch scope using ție de - console ) ) ) - log - : and depanare - start - using - your - browsers ( vizând transferuri apelurilor call puncte de oprire asincrone, DOM, - debugger evenimente, stiva stack - 62 ) bc 893 d … 93 ff
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Telerik HTTP Toolkit HTTP instrumente Instrumentele mitmproxy Fiddler disponibile ca exemple: – – github.com/ www.telerik.com/fiddler – mitmproxy.org : de depanare proxy depanare httptoolkit
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco developer.mozilla.org/Web/JavaScript/Reference/ Verificarea disponibil construc c ă se va instrumente ă ț utiliza ia î ncep corectitudinii "use strict"; â varianta nd cu ECMAScript ECMAScript cu indic strict : codului testare ă interpretorului ă a limbajului versiunea JavaScript Strict_mode 5
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco a variabilelor Verificarea erorile vor de instrumente globale conduce la conduce programare corectitudinii , nume emiterea ( e.g. identice : , crearea codului testare de de excep propriet accidental JavaScript ț ii ăț i ă etc.)
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Verificarea folosirea sunt instrumente numere construc corectitudinii interzise exprimate ț iilor etc. diverse with : codului testare î n , arguments.callee facilit baza ăț 8 JavaScript , i:
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco este implicit implicit module code is always strict mode code strict mode always code is module nu modific este Modul instrumente folosit impus ă semantica de pentru procesare de mediu : modulele programelor testare l de strict: execu de codES ție 6
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco JS Inspect ( d etect github.com/ Verificare instrumente s JSHint copy ESLint - pasted danielstjules – static www.jshint.com – eslint.org & ă acodului : structurally similar code similar structurally testare / jsinspect ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco console let = constC varAiurea " use strict use obiect .error instrumente = { 33 = "Ah!"; "; prop ; (`{ obiect : ++C , }`); prop : true}; : testare // eroare de sintaxă
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco instrumente : testare reguli ESHint
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco github.com/ AVA Mocha Suport de , Cypress , studiat PhantomJS sorrycc pentru instrumente , www.letscodejavascript.com dom și Let / awesome - , testing testare, inclusiv testare, Qunit ’ exemplific s Code: Test Code:s , - Sinon.js - javascript#testing library : ă testare ri - Driven JavaScript Driven : , , Flow Tape unit testing , , Jasmine TestCafe - frameworks , Jest etc. ,
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Testare Browser Sandbox Browser Browserling Browser Browsera instrumente cross - Shots browser – – exemple: www.browsera.com www.browserling.com – – browsershots.org turbo.net/ a : testare aplica browsers ț iilor Web
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Principles of Writing Consistent, Idiomatic JavaScript JavaScript Idiomatic Consistent, Writing of Principles instrumente Standarde Code Conventions for JavaScript for Code Conventions www.crockford.com/code.html github.com/ de JavaScript redactare : standardjs.com documentarea rwaldron Standard a codului /idiomatic.js Style JavaScript codului
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco instrumente Standarde facebook.github.io/ ghiduri google.github.io/ docs.npmjs.com/ Airbnb Google JavaScript Style Guide JavaScript Google de React Native React github.com/ NPM specifice redactare : JavaScript documentarea ’ s react C styleguide misc airbnb oding – - native/ Code Code câteva exemple: câteva /coding a / Style javascript codului S /jsguide.html tyle docs Style - style.html Guide /style.html JavaScript codului
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco instrumente Standarde esformatter instrumente utile( JS de – Beautifier github.com/ Prettier redactare : documentarea formatatoare – – millermedeiros jsbeautifier.org prettier.io a codului a codului JavaScript / esformatter codului - sursă):
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco } class Dot extends Point { /** */ * * Class representing a dot. @extends @extends } getWidth /** } constructor(x, y, width) { /** */ * * Get the dot's width. */ * * * * Create a dot. @return @return @param @param @param // ... documentarea () () { Point {number} {number} The dot's width. {number} {number} width {number} y {number} x - - The The y value. The x value. // ... codului: codului: - .. . JSDoc … @ @module @ @ @ @ @event @ @ @ @ @ @alias @ @abstract marcaje (adnotări) speciale requires property function listens emits callback interface class extends async access Toolkit în în comentariilor: cadrul – usejsdoc.org @ @ @ @ @ @ @ @ @ @copyright @ deprecated todo see since example version description summary license author
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco UglifyJS Instrumente J S Compress instrumente (Mihai Bazon, FII) absolvent Minify – privind github.com/circlecell/jscompress.com – : exemple: www.minifier.org compresie compresia – lisperator.net/ / minimizarea de cod uglifyjs /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Closure Compiler Closure Transformarea instrumente Prepack (Google) codului (Facebook) : optimizare exempl – developers.google.com/closure JS e î : – ntr prepack.io detalii detalii într - curs separatcurs unul javascript optimizat - un un
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco c github.com/ ă utare Managementul , instalare sorrycc instrumente Bower , / compilare awesome , jspm exemple de , - npm pachete javascript#package , verificare : pachete : , Yarn JavaScript etc. a dependen - managers ț elor
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco crearea de conglomerate de cod/resurse ( de cod/resurse deconglomerate crearea github.com/ browserify Managementul instrumente sorrycc , Rollup exemplificări: / awesome de (specific ES (specific pachete : pachete - javascript#bundlers 6 JavaScript ), webpack bundles )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Suport pentru fluxuride activități ( Brunch instrumente , Grunt eventualrealizate automat , Yeoman : fluxuri de activități : fluxuri exemple: exemple: , Phantom.js , Plop workflow , Selenium - uri),
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Sisteme demanagement almachetelor deredare github.com/ instrumente a conținutului ( Dust.js sorrycc , EJS / awesome , Handlebars exemplificări: exemplificări: : machete deredare : machete templating - javascript#templating , Mustache.js engines , … ) - engines
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco resurse de interes laresurse deinteres Bibliotecipentru programarea funcțională instrumente Underscore Ramda Lodash github.com/ – – – ramdajs.com underscorejs.org lodash.com : programare stoeffel / awesome - fp - js
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco vizează procesarea fluxurilor de date asincrone fluxurilor vizează procesarea Bibliotecipentru programarea reactivă adopt instrumente pe baza paradigmei funcționale baza funcționale pe paradigmei ă șablonul de proiectare de proiectare ă șablonul www.learnrxjs.io : programare Observer
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Bibliotecipentru programarea reactivă instrumente Most.js RxJS – MobX Cycle github.com/ – github.com/ exemple: – – cycle.js.org mobx.js.org : programare ReactiveX cujojs / most / rxjs
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco subset subset scăzut, eficient scăzut, eficient Suport pentru creșterea performanței rulează nativ în în rulează nativ JavaScript asm.js – ce poate fi utilizat ca limbaj denivel calimbaj fiutilizat ce poate instrumente în spiritul limbajului deasamblare limbajului în spiritul ( Mozilla asmjs.org Chrome , 2012 , Edge — 2014 și Firefox )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco limbaj de programare proiectat pentru execuție execuție eficientă pentru proiectat deprogramare limbaj WebAssembly webassembly.org Suport pentru creșterea performanței safe, portable, low portable, safe, la nivel de( – wasm instrumente developer.mozilla.org/ (în lucru, browser - levelcode format 2 ) Web ) 9 octombrie octombrie WebAssembly 2019 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco uzual, programele uzual, include un set restrâns de tipuri dedate set restrânsdetipuri și operații un include axat pe realizarea de calcule numerice complexe realizarea numerice axat pe de calcule Suport pentru creșterea performanței permite optimizări la momentul compilării la momentul optimizări permite WebAssembly instrumente wasm sunt organizate în sunt organizate în module – wasm
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco tech.ebayinc.com/engineering/ www.smashingmagazine.com/ G P. . R. Cuvillier Jha To UpSpeed OurApp By Web Aboukhalilich www.continuation , S. WebAssembly instrumente A Real Padmanabhan , D 3 WASM: A Portof studii de caz reale: studii reale: de caz - WorldUseCase , webassembly How UsedWe - labs.com/projects/d 2019 and , / 04 WebAssembly WebGL /webassembly - at Doom - ebay ( 2019 20 WebAssembly ( 2019 - X 3 a wasm/ - ( real 3 - ) 2019 speed Engine at eBay: ) - world - ) web - use to - app/ - case/
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco încărcare asincronă a aplicație scrisă în limbajul de de programare înlimbajul scrisă aplicație preferat modul modulului modulului alte limbaje wasm asm.js JIT ( navigator Web, server Web, soluție platformă de execuție ( wasm Just binaryen publicare - In - Time compilator apelarea cod binar modul ) / AOT ( C/C++ wasm pe Webpe a emscripten ul Ahead funcțiilor furnizate funcțiilor ui run wasm - Of - alte limbaje time - modu Time cloud JS/ES ) ) instanțierea lu lui wasm
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco WebAssembly instrument online: instrumente webassembly.github.io/spec/core/ detalii în specificația detalii în specificația oficială Playground – ast.run
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco tratarea erorilor:tratarea Utilizarea unui modul unui Utilizarea WebAssembly developer.mozilla.org/ metodă de Global Module Global instanțiere instrumente CompileError obiecte: obiecte: wasm WebAssembly#API_reference : instantiateStreaming via API Instance LinkError - ul Memory JS disponibil RuntimeError Table ()
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco De regulă, un modul modul un De regulă, de evitat transferuri frecvente de date frecvente de evitattransferuri dar codul poate fi partajat de alte programe JS dealteprograme fi partajat poate dar codul neinteractive neinteractive și instanțiat instrumente – wasm „ lucrători de multiple ori de multiple nu are acces direct la DOM, direct areacces nu ” ( Web workers JS ↔ wasm ) –
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco www.smashingmagazine.com/ modulele modulele inclusiv wasm „ în nori instrumente pot fi executate la nivelde fiexecutate pot server, 2019 ” – / 08 Serverless /beyond - browser WebAssembly - serverless - webassembly/
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco jamesthom.as/blog/ developers.cloudflare.com/ funcții funcții funcții funcții exploatate pe exploatate executate platforma executate pe Serverless platforma deschisăplatforma serverless serverless (James Thomas, august august (James Thomas, 2019 IBM WebAssembly / WebAssembly 08 Node.js Node.js module încărcând / workers 06 Cloud / serverless Apache Apache / Functions templates Cloudflare - – and generate cu generate exemplificări: OpenWhisk - / 2019 webassembly boilerplates ce recurge la ce recurge Workers ) / Rust wasm rustwasm - modules și / / Dr. Sabin Buragaprofs.info.uaic.ro/~busaco execuție ( execuție serverpe includere demalware ( www.virusbulletin.com/virusbulletin/ Rularea neautorizată de neautorizată cod Rularea buffer overflow probleme de securitate: probleme cauzând XSS( cauzând instrumente Server e.g. - Side , cryptocurrency 2018 wasm Remote Cross / 10 /dark poate conduce la conduce poate - Site Code - side Scripting mining - webassembly Execution ) etc. ) ), ),
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco WebKit “ www.forcepoint.com/blog/x A Study A Study on the Prevalence of over malicious deeds, such as mining and obfuscation and as mining deeds,such malicious www.tu 50 : Infoleak : in Incidente realevizând bugs.chromium.org/p/ R. Neumann &A. Toro, Coinhive %of all sites using using sitesall %of - braunschweig.de/Medien M. Musch and WebAssembly - labs/browser WebAssembly et al. project WebAssembly , “ New Kid on the Web: - WebAssembly zero/ - - In DB/ias/pubs/ mining Compilation - WebAssembly browsermining: issues (aprilie (aprilie in the Wild - coinhive / detail?id 2019 2018 - and - (martie (martie dimva.pdf ” = apply itfor apply , 1545 - DIMVA webassembly ) : 2018 2019 ” )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco instrumente hacks.mozilla.org/category/ github.com/ www.webassemblyman.com resursede interes: mbasso /awesome webassembly - wasm /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco CoffeeScriptRedux CoffeeScript Alte limbaje – LiveScript dialecte dialecte github.com/ instrumente coffeescript.org (Jeremy – CoffeeScript – compilate în JS livescript.net livescript.net michaelficarra Ashkenas : / , CoffeeScriptRedux 2009 : )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco github.com/ Alte TypeScript TypeScript limbaje instrumente www.typescriptlang.org instrumente dzharii (Microsoft, (Microsoft, – /awesome compilate în JS + resurse din - typescript 2012 : ) :
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ( blog.logrocket.com/the TypeScript a se Alte considera WebAssembly limbaje docs.assemblyscript. instrumente - introductory și inițiativa și inițiativa TypeScript – compilate în JS via compilatorul via compilatorul - AssemblyScript guide org - to - assemblyscript : Binaryen ) : / Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Emscripten î ( n e.g. Portarea WebAssembly , programe kripken.github.io/ – compilator altor instrumente C , plus sau aplica LLVM C++ cod emscripten ț c OpenGL ii gener ar î e se n JavaScript â - compil nd site/ în cod JS cod WebGL ează / wasm )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ( Common Intermediate Common JSIL î Portarea n programe – compilator altor instrumente JavaScript care transform aplica jsil.org Language rul ț ii â î ) alaplicațiilor n JavaScript nd în ă codul CIL codul browser .NET
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ClosureScript www.scala Scala.js Portarea PyPy.js – - Pure js.org – compilează programele Scala în JS Scala programelecod compilează Closure Script – altor instrumente Python www.lihaoyi.com/hands – aplica JS www.purescript.org : github.com/ asm.js: ț ii î n JavaScript pypyjs.org clojure - on / - clojurescript scala - js/
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco biblioteci N - / am framework putea recurge - uri JS specifice la ?
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco colec www.javascripting.com ț ii de (micro microjs.com jster.net - ) biblioteci JS : Dr. Sabin Buragaprofs.info.uaic.ro/~busaco facilitarea dezvoltare B generarea iblioteci procesarea realizarea transferurilor tehnici vizualizarea de JavaScript de con jocuri formularelor de criptografice … ț efecte inut ( e.g. datelor asincrone , grafic specializate game game engines vizuale Web 2 D/ de date 3 D : )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco data front altele: testing mobile & desktop & mobile altele: altele: layer - end Cypress : Jest altele: altele: B Svelte : altele: : iblioteci Redux React , Mocha , , VueX conform conform Aurelia QUnit Flutter , , Vue.js : GraphQL Electron / , , Jasmine framework ember , Tape , , , Weex Hyperapp Angular 2018 , , Apollo - , React data , .stateofjs.com Chai Enzyme , Quasar , , Preact , - NgRx , uri TestCafe , Native Backbone MobX , , populare Karma Expo Expo , , RxJS Ember , , Cordova Relay , Protractor etc. etc. , etc. , Mithril Storybook , (Modern) Polymer , Ionic , … , …
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco proiectarea interfeței proiectarea cu utilizatorul: Js B pdfmake internaționalizare: internaționalizare: baze baze de date: iblioteci Barcode dezvoltare de jocuri: de jocuri: dezvoltare prelucrare/generare de date îndiverseformate: prelucrare/generare Loki suport pentru pentru suport Styled Melon JS , , Psd.js / Ace , , jsPDF framework PouchDB , Components P , Alasql 2 Deck.js , .js , Qrcodejs JS , Phaser OAuth Globalize Xlsx , , Juggling , Typeorm Materialized Cannon - , uri MathJax , , : , SheetJS Semantic UI Semantic hello.js Pixi.js specializate , i DB 18 , , Easystar Watermelon , next , , , , Whitestorm Numeric Knex STDlib JSO Anypixel , Reveal , , , Lingui Salte , Slate Local , LiquidFun , Superstruct , – , Papa Papa , exemple: Auth , etc. Ant Design Db Polyglot , Forage … , … Parse , , , Dr. Sabin, Buragaprofs.info.uaic.ro/~busaco prelucrare audio: audio: prelucrare MetricsGraphics.js învățare automată: învățare automată: rețea: B rețele neuronale: rețele neuronale: iblioteci manipulare de imagini: deimagini: manipulare Cylon Axios hardware Cytoscape , / , IoTjs framework arhivare: Faye ( Howler , , e.g. , , Dagre Johnny Brain.js Request Nude.js Clmtrackr , roboți, roboți, JSZip , , - Drawingboard Midi.js - uri , five , , Convnet.js , Paper.js Anypixel PeerJS LZ IoT , specializate , Ml Maker.js String , , imprimante imprimante , 5 SoundManager , , T SockJS , , Plotfly ensorFlow.js , , Bonsai Keras.js ZIP.js , , Ruff.io Fabric.js , Superagent , – Processing.js , Caman 3 exemple: , D): Synaptic etc. 2 , , , TFjs Tone.js , , , … …
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Nu putem adoptadiverse șabloane de proiectare pentru JavaScript ?
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Command Adapter Ș abloane , Bridge , Iterator Builder , Decorator de comportamentale , , Mediator Prototype proiectare crea structurale ț ionale , Façade , Observer , Singleton tradi , Flyweight ț , ionale State , , Visitor Proxy
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Addy www.addyosmani.com/resources/essentialjsdesignpatterns/book/ Osmani, Ș MVVM ( MVVM abloane MVC ( MVC MVP ( MVP Learning JavaScript Design Patterns Design JavaScript Learning pentru detalii, de explorat: detalii, pentru Model Model Model View de - - View proiectare View - - Controller Presenter ViewModel MV* ) ) ) ( 2017 ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco HTTP Request updates ( model e.g. Data Collection of Router , DB, API, View Models Source syncs events model … ) updates events DOM DOM într (A. Osmani, (A. la nivelde client flux deactivitățiflux - o aplicație MV* aplicație o DOM 2013 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Dusan www.sitepoint.com/mvc Gledovic Camilo Reyes exemplificări exemplificări de implementări JS: Ș abloane gist.github.com/ in Vanilla JavaScript Vanilla in , Basic , de The MVC Design Pattern Design MVC The JS MVC Implementation proiectare - gschema design - pattern / 4157554 ( 2017 MV* - javascript/ ) ( 2015 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco utilizare Backbone pragmatic Ș abloane Backbone Ember Angular Marionette Aurelia ă de . js via – – proiectare – – backbonejs.org biblioteci emberjs.com angular.io aurelia.io – marionettejs.com / framework MV* - uri:
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Anumite Anumite trat ând router biblioteci doar anumit aspectalMVC/MVVMun – github.com/ privind / framework dirijarea: kevindurb - uri pot fispecializate, pot uri / router
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Anumite Anumite trat ând biblioteci doar anumit aspectalMVC/MVVMun Knockout pentru pentru Preact React / Vue framework View – – – – preactjs.com knockoutjs.com vuejs.org reactjs.org – exemple: exemple: - uri pot fispecializate, pot uri
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Anumite Anumite Immutable trat Breeze vizând parteade ând biblioteci doar anumit aspectalMVC/MVVMun JS – – immutable www.getbreezenow.com/breezejs / framework Model - js.github.io/ – - uri pot fispecializate, pot uri exemplificări: immutable - js /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco în cazulJSclasic, via limbajul Ș abloane AMD github.com/ modularizarea specificarea aspect de aspect ( de Asynchronous Module Definition Asynchronous proiectare amdjs interes modulelor / codului amdjs : specifice - api se poate realiz ) a
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco în cazulJSclasic, via î limbajul nc ă Ș rcare abloane AMD curl.js de cod modularizarea specificarea aspect de aspect ( de Asynchronous Module Definition Asynchronous , PINF folosind proiectare , RequireJS interes modulelor biblioteci codului : specifice , … se specifice poate realiz : ) a
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco un format de un format alternativ Ș abloane wiki.commonjs.org/wiki/ reutilizabile modularizarea declarare , se , aspect de aspect de poate proiectare la a recurge nivel modulelor interes codului de server CommonJS la : specifice CommonJS și pachetelor
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco fișierelor dependența implementarea efectivă directacces la constante, numele (clase, este implicit fiecare fragment de cod (monolitică) abordarefărămodule contextul rulării depind dependențele de între fișiere relații nespecificate sunt implicite dependențele … ) & module de ordineade încărcării global sunt globale de cod funcții, funcții, (pacheteES/ module+ abordare comandă ( comandă se permite rularea un modulunic fiecare fișier expune sunt declarate decod dependențele nu are importanță ordinea sunt ascunse implementaredetaliile de ce ledefinește numele sunt locale ușor înțeles de pacheteleexpun interfețe publice încărcării fișierelor modulară headless explicit din linia din linia de pachetului browser wasm ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Serg pentru alte resursepentru deinteres,a se consulta Hospodarets Nicolás Ș abloane ponyfoo.com/articles/module slides.com/ ES Bevacqua modularizarea github.com/ 6 modules for modules aspect de aspect , de Native malyw proiectare , Module Design webmodules /native JavaScript interes W codului eb - js usage - : specifice modules - design modules : , 2018 , 2018
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (în loc de) pauză locde) (în
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco rescriereadinamică paginii Web a conținutului – pe baza transferului asincron aldatelor pe transferului baza Ș în urma interacțiunii cu utilizatorul cu în urmainteracțiunii abloane SPA ( Single Page Single aspect de aspect de proiectare interes Applications : specifice ) –
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco de studiat observes changes Mikito ▦ structurade bază a unei SPA ⵄ ▣ model DOM view Takada singlepageappbook.com , Single queries writes renders emits P to & age age ⧆ ☄ A pps template storage events in D epth ( 2017 ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco managementul stării se facemanagementul deDOMindependent observes changes ▦ ⵄ ▣ nu sunt preluatenu sunt date dinDOM model DOM view write queries writes renders - only emits DOM to & ⧆ ☄ template storage events
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco modelele reprezintămodelele toate datele/stările Web aplicației și observes changes models ▦ ⵄ ▣ model DOM view sunt păstratesunt în memorie are the queries writes single renders emits to source & ⧆ ☄ template of storage events truth
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco primesc notificări deactualizare dinpartea notificări modelelor primesc observes view changes - ▦ urile reflectăși modelelor urile conținutul ⵄ ▣ views model DOM view observe model observe queries writes renders emits to & changes ⧆ ☄ template storage events
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco d ecoupled sub observes pachete expunând o interfață simplăpublică - changes sisteme independente,(module) specializate arhitectura aplicației este din compusă modules that expose small externalthat modulesexposesmall surfaces ▦ ⵄ ▣ model DOM view queries writes renders emits to & ⧆ ☄ template storage events
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco observes changes vizând manipularea arborelui DOM minimizing minimizarea și izolareaJS codului ▦ ⵄ ▣ model DOM view DOM dependent queries writes renders emits to & ⧆ ☄ template storage - events code
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco acestă într la nivelde ( e.g. - o anumită anumită stare ( o , buton, buton, , model stare nu este neapărat dependentă dependentă este neapărat de stare nu front player - end , câmp să câmp de editare)poate se afle , , fiecare isPressed component , isPlaying components ă interactivă ă interactivă , isTyping back - , end … )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (toate componentele interactive să fie să fie sincronizate) interactive componentele (toate redarea/împrospătarea eficientă eficientă a conținutului redarea/împrospătarea SPA ( Single Page problemă: problemă: Applications )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (toate componentele interactive să fie să fie sincronizate) interactive componentele (toate sunt costisitoare pentru aplicații Web complexe complexe Web aplicații costisitoare pentru sunt redarea/împrospătarea eficientă eficientă a conținutului redarea/împrospătarea operațiile de ( operațiile alterare SPA ( Single Page problemă: problemă: mutation Applications ) a DOM ) ) - ului ului
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco managementul stării globale a aplicației a aplicației stării ( globale managementul SPA ( Single Page necesitate: Applications application ) state ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco managementul stării aplicației stării rulării la momentul aplicației managementul starea curentăa tools.ietf.org/ SPA uzual, de uzual, ( Single Page view URL html # fragment - ului e dependentă ului de URL ↔ /rfc stare 3986 Applications - identifier #section - 3.5 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Managementul stării Managementul datele sunt procesate via fluxuri unidirecționale via fluxuri procesate datele sunt Flux (Facebook) (Facebook) – : abordarearhitecturală facebook.github.io/flux/
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Managementul stării: stării: Managementul MobX – s imple , scalable statemanagement scalable , mobx.js.org biblioteci/ framework - uri JS uri
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Redux Managementul stării: stării: Managementul a se experimenta a se și experimenta – managementul centralizat alstăriiaplicației centralizat managementul ( a predictable redux.js.org Redux biblioteci/ statecontainer Toolkit framework și React ) Redux - uri JS uri
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Vuex Managementul stării: stării: Managementul ( a state management pattern +librarystate management a – managementul stării în aplicații cuVue.js create stării înaplicații managementul vuex.vuejs.org biblioteci/ framework for Vue.js for - uri JS uri )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco definirea unor componente ce ulterior pot fi inițializate pot ceulterior componente definirea unor aceste componente pot fi încărcate fiîncărcate asincron pot aceste componente SPA (eventual, la cerere) via module la cerere) (eventual, suport pentru reutilizare pentru suport ( Single Page Applications )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco componente majore SPAale unei (PatrickAckerman, 2017
) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco github.com/ Functional ( FRP aspecte formale în C. Elliot & P. înC.Elliot aspecte formale SPA uzual, se bazează se paradigmade pe bazează uzual, programare (funcțională) reactivă reactivă (funcțională) programare – conal functional ( Single Page conal.net/papers/icfp Reactive /talk - 2015 reactive Animation - essence Applications programming - 97 and , ICFP , / - Hudak origins 1997 ) , - ) of - frp
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco a stream vizând de fluxuri gist.github.com/ a sequence of a sequence SPA programare (funcțională) reactivă reactivă (funcțională) programare ( ( event paradigmă declarativă paradigmă Single Page stream staltz ongoing events ordered in time in events ordered ongoing date / 868 , prelucrate observable Applications e 7 e 9 bc 2 a 7 ) asincron b 8 c 1 ) f 754
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco orice modificare de datea valoriiunei fi structuri ce poate unui eveniment ce poate fi tratat asincron (via fitratat eveniment ce poate unui www.sitepoint.com/graphql de entitățile de entitățile ce depind de această structură observată ( observată synchronous Generator Function Observable
single multiple - ) determină determină propagarea ) react - asynchronous Observable native Promise - getting - started/ Promise )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco www.infoq.com/reactive SPA programare (funcțională) reactivă reactivă (funcțională) programare studii de caz concrete + resurse:studii de caz concrete ( Single Page Applications - programming/ )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco comunicare prin paradigma prinparadigma comunicare PubSubJS WebSub Ș abloane AmplifyJS www.w ( – W github.com/ aspect de aspect 3 de C biblioteci: Recommendation 3 proiectare .org/TR/websub/ – amplifyjs.com interes mroderick publish : specifice / PubSubJS , / 201 subscribe 8 ):
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco de explorat și de explorat Asigurarea interacțiuniicu utilizatorul (eventual, (eventual, One Page Love Meteor.js Ember.js Turbine Angular Aurelia Mithril multi React - platformă) – onepagelove.com
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Apache Apache instrumente instrumente React JavaScript Cordova de aplicații hibride (Web +native) (Web de aplicații hibride NativeScript Ionic Native Native Electron Tabris.js React (ex multi Flutter Flutter – facebook.github.io/ pe - PhoneGap – – - platformă platforme ionicframework.com – www – – electronjs.org tabrisjs.com flutter.dev .nativescript.org ) – pentru cordova.apache.org multiple react crearea - native/
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco framework altele la altele JavaScript Hammer.js Hammer.js iScroll www.javascripting.com/mobile e.g. - uri și biblioteci și biblioteci uri Slideout.js Slideout.js , interacțiune pringesturi: interacțiune , – github.com/ pe – platforme hammerjs.github.io – slideout.js.org JavaScript cubiq multiple / iscroll - specializate and - touch/
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco developer.amazon.com/apps recurgerea la API recurgerea Microsoft Windows Universal Microsoft developer.tizen.org/ docs.microsoft.com/en JavaScript - uri pe Amazon Fire JavaScript platforme Tizen category - and - us - games/services / windows oferite de oferite platformă / tags Applications multiple / javascript / uwp / - and - apis
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco J S ++ PLV (garantează tipul variabilelor (garantează tipul Objective 8 integrat în integrat ( extensie extensie - www.cappuccino.dev www.onux.com/jspp/ J ( framework JavaScript modelat după modelat plv E xtinderi 8 .github.io - pentru ul Cappuccino Objective – type guarantees PostgreSQL - C ) , ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco www.codefellows.org/blog/a instrumente - list - of - foundational - javascript - tools
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco suita de tehnologiisuita HTML episodul viitor: 5
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco