O prezentare (pentru ediția 2015 a Școlii de vară "Informatica la Castel" de la Macea, Arad – www.informaticalacastel.ro) descriind o serie de instrumente Web disponibile liber și bazate pe diversele tehnologii aliniate curentului "cloud computing" pentru editarea, testarea, rularea și partajarea de cod-sursă scris în mai multe limbaje de programare.
Pentru alte detalii, a se vizita siturile aferente materiilor predate de Sabin Buraga: http://profs.info.uaic.ro/~busaco/teach/
3. aplicații native
instalabile pe un calculator/dispozitiv (mobil)
rulate grație unui mediu de execuție – uzual, oferit
de un sistem de operare (e.g., Linux, iOS,…) –
pe un procesor real/virtual
4. aplicații native
prezintă una/mai multe modalități
de interacțiune cu utilizatorul:
linia de comandă (CLI – Command Line Interface)
manipulare directă: WIMP (Window Icon Menu Pointer)
naturală – e.g., gesturi, voce, mișcare, ubicuitate, 3D,…
5.
6. aplicații native
pot recurge la platforme/tehnologii/limbaje
proprietare și/sau libere
pot fi utilizate conform unei licențe
(proprietare sau deschise)
9. aplicații Web
prezintă o interfață cu utilizatorul exploatabilă
la nivel de client (i.e. navigator Web)
recurg la standarde/formate de date deschise
(HTTP, URL, HTML, CSS, JSON, SVG, XML, RDF,…)
12. server de aplicații Web
scop:
eficientizarea proceselor de dezvoltare
a aplicațiilor Web de anvergură
13. server de aplicații Web
se bazează pe interfețe de programare
(API – Application Programming Interface)
și/sau pe componente reutilizabile
puse la dispoziție de server ori de alți ofertanți
14. server de aplicații Web
poate fi integrat în unul/mai multe servere Web
de asemenea, poate oferi propriul server Web
sau mediu de execuție
15. server de aplicații Web
simplifică maniera de invocare
de programe (script-uri) ale unei aplicații Web
generarea de conținut dinamic pe partea de server
16. server de aplicații Web
adoptă unul sau mai multe limbaje de programare
Erlang/Elixir – Chicago Boss, Phoenix, Sugar,…
Java – AppFuse, Play, Wicket etc.
JavaScript – Node.js + framework-uri: Express, Locomotive ș.a.
PHP – PHP + framework-uri: CakePHP, CodeIgniter, Symfony,…
Python – Django, Flask, Grok, Pyramid, Zope
Ruby – Cramp, Ruby on Rails, Sinatra,…
Scala – Apache Spark, Akka, Finagle, Play etc.
disponibile cu licențe de utilizare liberă
17. cadru de lucru (framework)
facilitează dezvoltarea de aplicații Web complexe,
simplificând operații uzuale (e.g., acces la baze
de date, generare de cod, management de sesiuni,
asigurarea performanței/securității)
și/sau încurajând reutilizarea codului-sursă
18. cadru de lucru (framework)
vizează dezvoltarea de aplicații la nivel de server
alte exemplificări:
Cuba (Ruby), Laravel (PHP), Meteor (Node.js),
Mojolicious (Perl), Ninja (Java), ObjectWeb (Python),
Revel (Go), Wt (C++)
19. cadru de lucru (framework)
oferă suport pentru implementări JavaScript
la nivel de client
exemple populare:
AngularJS, Backbone.JS, Ember
de studiat și www.infoq.com/research/javascript-frameworks-2015
20. bibliotecă (library)
colecție de resurse computaționale reutilizabile
– i.e., structuri de date + cod –
oferind funcționalități specifice
implementate într-un limbaj de programare
21. bibliotecă (library)
poate fi referită de alt cod-sursă (software):
server de aplicații, framework, bibliotecă,
serviciu, API ori componentă Web
22. bibliotecă (library)
diverse exemple „notorii” cu acces liber la codul-sursă:
Beautiful Soup – www.crummy.com/software/BeautifulSoup
D3.js – http://d3js.org/
ImageMagick – www.imagemagick.org
libcurl – http://curl.haxx.se/
Libxml2 – www.xmlsoft.org
Mustache – http://mustache.github.io/
OpenCV – opencv.org
Redland – http://librdf.org/
zlib – www.zlib.net
23. serviciu Web
software – utilizat la distanță de alte aplicații
și/sau servicii – ce oferă o funcționalitate specifică,
a cărui implementare nu trebuie cunoscută
de către dezvoltator
24. serviciu Web
recurge la tehnologii deschise, standardizate
adresare via URI (Uniform Resource Identifier)
acces prin HTTP (HyperText Transfer Protocol)
formate de date:
CSV (Comma Separated Values)
JSON (JavaScript Object Notation)
XML (Extensible Markup Language)
…
25. interfață de programare (API)
orice interfață bine-definită ce specifică operațiile
pe care o componentă, un modul ori o aplicație
le oferă altor elemente software
26. interfață de programare (API)
API public
disponibil pe baza unei licențe de utilizare
API privat
pentru uz intern
28. ansamblu de dezvoltare
(SDK – software development kit)
încapsulează funcționalitățile API-ului
într-o bibliotecă ori colecție de module
(implementată într-un limbaj de programare,
pentru o platformă software/hardware specifică)
30. implementare
De la aplicații la API-uri și servere de aplicații
Brian Mulloy, Web API Design, Apigee, 2012
http://offers.apigee.com/web-api-design-ebook/
32. componentă Web
parte a unei aplicații Web
ce încapsulează o suită de funcții înrudite
e.g., calendar, cititor de fluxuri de știri,
buton de partajare a URL-ului în altă aplicație
33. componentă Web
dezvoltare pe baza unei biblioteci sau framework
soluții „clasice” – uzual, la nivel de client:
Dojo Toolkit, jQuery UI,…
34. componentă Web
cadrul general:
Web Components (în lucru la Consorțiul Web)
recurgând la diverse tehnologii HTML5
http://webcomponents.org/
35. widget
aplicație – de sine-stătătoare sau inclusă
într-un container (e.g., un document HTML) –
ce oferă o funcționalitate specifică
36. widget
rulează la nivel de client
(platformă pusă la dispoziție de sistemul
de operare și/sau de navigatorul Web)
implementare pe baza standardelor: HTML, CSS, JS
37. (Web) app
o aplicație (Web) instalabilă
care folosește API-urile oferite de o platformă:
browser, server de aplicații, sistem de operare,…
38. (Web) app
a distributed computer software application
designed for optimal use on specific screen sizes
and with particular interface technologies
Robert Shilston, 2013
39. (Web) app
uzual, se poate obține via un app store
(centralizat sau descentralizat)
exemple notabile:
Chrome Apps
aplicații Web (mobile) pentru Firefox/Firefox OS
41. add-on
denumire generică a aplicațiilor asociate unui
navigator Web (extensii, teme vizuale, dicționare,
maniere de căutare pe Web, plug-in-uri etc.)
44. cod-sursă stocat
(code repositories)
instrumente de
dezvoltare (IDE)
mediu de execuție
(runtime environment)
dezvoltare
rulare
adaptaredupăA.Iqbal,M.Haunsenblas,S.Decker(2012)
procesul actual de dezvoltare și exploatare
a aplicațiilor Web – Development As A Service
☁
☁ ☁
45. cod-sursă stocat
(code repositories)
instrumente de
dezvoltare (IDE)
mediu de execuție
(runtime environment)
dezvoltare
rulare
adaptaredupăA.Iqbal,M.Haunsenblas,S.Decker(2012)
☁
☁ ☁
DigitalOcean, Google App Engine,
Heroku, Jelastic, OpenStack,…
BitBucket,
GitHub,…
Web: Cloud9, Koding și altele
desktop: Eclipse, KDevelop etc.
61. studierea unor construcții CSS +
posibilități de partajare și comentarii
CSSDeck – http://cssdeck.com/
aici sistemul solar animat: cssdeck.com/labs/css-only-solar-system-model
63. un instrument pentru designeri și dezvoltatori Web
pe partea de client (front end)
pentru realizarea de exemple demonstrative
CodePen – http://codepen.io/
64. editare, testare, rulare și partajare de cod JavaScript,
inclusiv cu posibilitatea includerii de biblioteci:
AngularJS, Bonsai, D3.js, jQuery, Kinect.js, React, svg.js,…
JSFiddle – http://jsfiddle.net/
ca alternative, de survolat kodtest ori Liveweave
65. experimente practice de realizare
a designului Web responsiv (aici cu Bootstrap)
www.codeply.com/go
66. …cochetând cu grafica 3D pentru Web
http://webglplayground.net/
WebGL
în conjuncție cu jQuery
68. Dar dacă dorim să realizăm aplicații
tradiționale/Web/mobile (mai complexe)?
69. mediu integrat de dezvoltare
(IDE – Integrated Development Environment)
oferă instrumente și mijloace specifice ingineriei
software: depanarea, documentarea, testarea,
managementul codului-sursă, gestiunea pachetelor
software, integrare cu alte componente, exploatare,
suport privind lucrul în echipă și altele
în contextul nostru, în „nori” (cloud computing)
70. o serie de soluții în „nori”
Cloud9 – c9.io
Codeanywhere – codeanywhere.com
Codenvy – codenvy.com
Codio – codio.com
Koding – koding.com
Nitrous – www.nitrous.io
Orion – orionhub.org
87. proiectarea interfeței cu utilizatorul
(sketching, wireframing, mockups & prototyping)
unelte în „nori”: FluidUI, Invision, MarvelApp, Moqups, UXPin
a se parcurge și http://uxdesign.cc/ux-tools/
88. testare automată a programelor
cu instrumentul TDD Bin: http://tddbin.com/
inițiativă: studierea noilor practici ES6 – http://es6katas.org/