Cu codul în "nori"

Dr. Sabin Buraga
Facultatea de Informatică, Universitatea „Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco
☁
☁
Cu c o dul în nori☀
☁
☁
☁

…în „excursiile” noastre (virtuale),
recurgem la aplicații – în general: software

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

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,…

aplicații native
pot recurge la platforme/tehnologii/limbaje
proprietare și/sau libere
pot fi utilizate conform unei licențe
(proprietare sau deschise)

detalii despre licențele de utilizare a software-ului/datelor la
tldrlegal.com

aplicații Web
colecție interconectată de pagini Web
cu conținut generat dinamic,
oferind o funcționalitate specifică

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,…)

☁☁⛭
⛭
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent
Internet
(Web)

La ce-am putea recurge
pentru a dezvolta aplicații Web?

server de aplicații Web
scop:
eficientizarea proceselor de dezvoltare
a aplicațiilor Web de anvergură

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

poate fi integrat în unul/mai multe servere Web
de asemenea, poate oferi propriul server Web
sau mediu de execuție

simplifică maniera de invocare
de programe (script-uri) ale unei aplicații Web
generarea de conținut dinamic pe partea de server

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ă

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ă

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++)

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

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

poate fi referită de alt cod-sursă (software):
server de aplicații, framework, bibliotecă,
serviciu, API ori componentă Web

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

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

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)
…

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

interfață de programare (API)
API public
disponibil pe baza unei licențe de utilizare
API privat
pentru uz intern

mash-ups
API-ul de la FitBit oferă acces la
date în formatele JSON și XML

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ă)

privire pragmatica
exemplu: acces la API-uri în Python – www.pythonapi.com

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/

Care-s elementele
software ce pot fi
reutilizate
în contextul
interacțiunii cu
clientul Web?

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

componentă Web
dezvoltare pe baza unei biblioteci sau framework
soluții „clasice” – uzual, la nivel de client:
Dojo Toolkit, jQuery UI,…

componentă Web
cadrul general:
Web Components (în lucru la Consorțiul Web)
recurgând la diverse tehnologii HTML5
http://webcomponents.org/

widget
aplicație – de sine-stătătoare sau inclusă
într-un container (e.g., un document HTML) –
ce oferă o funcționalitate specifică

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

(Web) app
o aplicație (Web) instalabilă
care folosește API-urile oferite de o platformă:
browser, server de aplicații, sistem de operare,…

(Web) app
a distributed computer software application
designed for optimal use on specific screen sizes
and with particular interface technologies
Robert Shilston, 2013

(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

Web browser
app store
single
page
app
platform
(OS + device)
native
app
HTTP
WebSockets
adaptare după Adrian Colyer (2012)
aplicații
Web
și
servicii
(API-uri)
☁ ☁

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.)

exemplificare: addons.mozilla.org

⛈
Recurgând la tehnologiile din „nori”,
n-am putea studia, dezvolta și/sau
contribui la software liber?

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
☁
☁ ☁

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.

precondiția #1:
calculator tradițional (desktop)
și/sau
dispozitiv portabil – de dorit, dotat cu tastatură reală

precondiția #2:
acces la Internet

precondiția #3:
existența unui navigator Web modern

Pentru început, să experimentăm
sau să ne familiarizăm cu diverse
limbaje/paradigme de programare…

editare, rulare, partajare de programe
cu Ideone – http://ideone.com/

un alt instrument Web, inclusiv
oferind propuneri de concursuri:
CodeChef – www.codechef.com/ide

trasarea execuției codului – Python,
Java, JavaScript, Ruby – pentru
a înțelege semantica instrucțiunilor
www.pythontutor.com

invocarea de cod PHP
PhpFiddle – http://phpfiddle.org/

interogări asupra bazelor de date
SQL Fiddle – http://sqlfiddle.com/

entuziaștii altor limbaje/tehnologii
pot consulta lista de la https://fiddles.io/

alte soluții vizând programarea în „nori”
www.tutorialspoint.com/codingground.htm

EDA Playground – www.edaplayground.com
mediu online pentru proiectarea și simularea
comportamentului circuitelor electronice

Ce-ar fi (să învățăm) să creăm
pagini/interfețe Web?

editarea on-line a codului HTML/CSS/JavaScript
cu instrumentul JS Bin – jsbin.com

experimente CSS (Cascading Style Sheets)
CSSDesk – cssdesk.com

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

…și puțin amuzament educativ
CSS Diner – http://flukeout.github.io/

un instrument pentru designeri și dezvoltatori Web
pe partea de client (front end)
pentru realizarea de exemple demonstrative
CodePen – http://codepen.io/

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

experimente practice de realizare
a designului Web responsiv (aici cu Bootstrap)
www.codeply.com/go

…cochetând cu grafica 3D pentru Web
http://webglplayground.net/
WebGL
în conjuncție cu jQuery

WebGLStudio – http://webglstudio.org/
o platformă Web pentru creat scene 3D interactive

Dar dacă dorim să realizăm aplicații
tradiționale/Web/mobile (mai complexe)?

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)

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

studiul de caz #1: Koding – https://koding.com/

acces la o mașină disponibilă în „nori”

spațiu de lucru oferind consultarea sistemului
de fișiere și editarea codului-sursă

…inclusiv cu rularea și testarea unor programe
(aplicații Web) concepute în PHP, Python, Ruby,…

…sau realizarea unor aplicații Internet
(aici, editarea, compilarea și rularea în terminal
a unui server TCP și clientul aferent concepute în C)

parcurgerea interactivă a sistemului de fișiere
+ testarea în terminal a suportului pentru Java

suport inclus pentru ajutor și conversații
de vizitat și http://learn.koding.com/

studiul de caz #2: Cloud9 – https://c9.io/

crearea unui spațiu de lucru (specific)

…și bine-cunoscuta pagină de întâmpinare

după plasarea codului-sursă (eventual, via SFTP
ori prin drag & drop), îl putem edita și rula
aici, testarea suportului pentru Node.js

generarea dinamică a conținutului
(i.e. marcaje HTML) via un program PHP
+ ilustrarea istoricului modificărilor codului-sursă

rularea unui program Python ce procesează
un document XML inclus în spațiul de lucru

facilități de configurare a mediului de execuție
și inspectarea listei proceselor sistemului

pentru posibilități de ajutor +
discuții tehnice a se vizita docs.c9.io

Altceva care ar putea fi de interes
pentru dezvoltatori?

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/

testare automată a programelor
cu instrumentul TDD Bin: http://tddbin.com/
inițiativă: studierea noilor practici ES6 – http://es6katas.org/

realizarea diagramelor și schemelor grafice
Draw.io – www.draw.io
Gliffy – www.gliffy.com
MindMup – www.mindmup.com
www.websequencediagrams.com

redactarea (e.g., în LaTeX)
și publicarea documentației
Authorea, OverLeaf, Papeeria

open participation
open data
open software
open app development
open web
open cloud
open (computing) hardware





⛈

Spor la dezvoltat aplicații în „nori”!
ilustrații: Sleeveface – www.sleeveface.com

Cu codul în "nori"

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Cu codul în "nori" (20)

More from Sabin Buraga (20)

Cu codul în "nori"