Τεχνολογία Λογισμικού - NTUA · 2020-06-04 · Σχολή...

Σχολή Ηλεκτρολόγων Μηχανικών & Μηχανικών Η/Υ

Εθνικό Μετσόβιο Πολυτεχνείο

Τεχνολογία Λογισμικού7ο / 9ο Εξάμηνο 2018‐19

Ν.Παπασπύρου, Αν.Καθ. ΣΗΜΜΥ, [email protected],grΒ.Βεσκούκης, Αν.Καθ. ΣΑΤΜ, [email protected],gr

Κ.Σαΐδης, ΠΔ 407, [email protected]

mailto:[email protected]

Αρχιτεκτονικά πρότυπα στονΠαγκόσμιο Ιστό

2

ΠεριεχόμεναΟ Παγκόσμιος ΙστόςΔιεπαφές χρήστη στον Παγκόσμιο Ιστό

Η τεχνική AJAX

Τα πρότυπα MVC, MVVM και ObservableΟ μορφότυπος JSON

Υπηρεσιοστραφής αρχιτεκτονική ﴾Service‐orientedarchitecture﴿Το αρχιτεκτονικό στυλ REST

Μικρουπηρεσίες ﴾Microservices﴿

3

Ο Παγκόσμιος Ιστός

4

Βασικά συστατικάClient/ServerHTTP ﴾Hyper Text Transfer Protocol﴿

HTML ﴾Hyper Text Markup Language﴿Unified Resource Identifiers, Locators and Names ﴾URIs, URLs,URNs﴿

5

Μορφή ενός URLscheme://[user:password@]host[:port]/path[?query][#fragment]

6

HTTPΜέθοδοι ﴾HEAD, GET, PUT, POST, DELETE, κ.ά﴿Headers ﴾Ηost, Αccept, Cookie, κ.ά﴿Status codes ﴾200, 404, 500, κ.ά﴿Εκδόσεις: 1.0, 1.1, 2.0

7

ΠαράδειγμαΑίτηση

GET /index.html HTTP/1.1<line feed>

Απάντηση

HTTP/1.1 200 OKDate: Wed, 29 Mar 2017 14:38:00 GMTServer: Apache/1.3.27 (Unix) ...Last‐Modified: Wed, 29 Mar 2017 01:16:05 GMTAccept‐Ranges: bytes Content‐Length: 6188 Content‐Type: text/html <html><head>...</head><body>...</body></html>

8

ΜετασχηματισμόςΑπό στατικές σελίδες & δυναμικά web sitesΣε διαδραστικά, προσαρμόσιμα και ταχέως αποκρίσιμα Webapplications που παρέχουν ή χρησιμοποιούν Web APIs

Ο Παγκόσμιος Ιστός μετασχηματίζεται σε μιαπρογραμματιστική πλατφόρμα υπηρεσιών με τη Javascript ναείναι η defacto γλώσσα

9

Διεπαφές χρήστη στον Παγκόσμιο ΙστόH τεχνική AJAX

Το πρότυπο Model‐View‐ViewModelΤο πρότυπο ObservableΤεχνικές ασύγχρονου προγραμματισμού ﴾Promises﴿ *Reactive Programming*

Ο μορφότυπος JSON

*Σε επόμενη διάλεξη

10

AJAXAsynchronous Javascript and XML ﴾JSON﴿

Αποστολή του HTTP αιτήματος ασύγχρονα ﴾σε ξεχωριστόthread﴿ και παροχή callback hook για το αποτέλεσμα

11

Προ‐AJAXAργά και δύσχρηστα User InterfacesΔεν ήταν εφικτό να υλοποιηθεί αποτελεσματικό UserExperience!

Π.χ. auto‐complete as you type του google search.Γιατί;

12

Παράδειγμαhttps://jsfiddle.net/2tqja09e/2577/

13

https://jsfiddle.net/2tqja09e/2577/

Το Observable πρότυπο σχεδίασηςPush paradigmΟ χρήστης/client του Observable ﴾ο observer﴿ ενημερώνεταιγια την αλλαγή της τιμής του observable ﴾το observable κάνειpush﴿Παρόμοια λογική με events & event handling

14

java.util.Observable

class Observable { void addObserver(Observer o); void deleteObserver(Observer o); boolean hasChanged(); void notifyObservers(); void notifyObservers(Object arg);}

15

Observerjava.util.Observable

interface Observer { void update(Observable o, Object arg);}

16

Το MVVM αρχιτεκτονικό πρότυπο

17

Παραλλαγή του Model‐View‐Controller

18

ΣυστατικάView: τα στοιχεία του UIModel: τα δεδομένα

ViewModel ﴾Presenter ή ViewController﴿:Data bindings ﴾model elements <‐> UI elements﴿Change notifications

19

Εφαρμογή του Observable στο MVVMViewModel: Ενθυλακώνει τα δεδομένα ﴾model elements﴿ σεobservablesΤα UI elements γίνονται bind ως observers στα modelelements

20

Παράδειγμαhttp://knockoutjs.com/examples/

22

http://knockoutjs.com/examples/

ΣυζήτησηΔηλωτικός κώδικας

Υψηλό επίπεδο αφαίρεσηςΑυτόματη ‐για τον προγραμματιστή‐ ενημέρωση του UI μετις αλλαγές στα δεδομέναΣύνθετο για απλές διεπαφές χρήσηςΘέματα απόδοσης σε πολύ μεγάλες εφαρμογές ή σύνολαδεδομένων

23

Ο μορφότυπος JSON

24

JavaScript Object Notation ﴾JSON﴿Text‐based πρότυπο για την κωδικοποίηση δεδομένων

ECMA‐262 3η έκδοση, rfc 4627, ECMA‐404

Kωδικοποίηση UNICODE ﴾UTF‐8, UTF‐16, UTF‐32﴿Βασίζεται σε υποσύνολο της JavaScript, αλλά είναι πλήρωςανεξάρτητο της γλώσσας προγραμματισμούΤο πλέον διαδεδομένο πρότυπο για:

την ασύχρονη επικοινωνία μεταξύ Web Browser και WebServerεπικοινωνία μεταξύ Web APIs ﴾services﴿

25

ΟφέληΑπλότητα

Αναγνώσιμο από τον άνθρωπο

Επεξεργάσιμο από οποιαδήποτε γλώσσαπρογραμματισμού

ΣταθερότηταΔεν υπάρχουν διαφορετικές εκδόσειςΔεν αναμένονται αλλαγές στο συνακτικό

Ταχύτερο κι απλούστερο από την XMLWSDL, XML Web Services

26

Τύποι δεδομένωνΠρωτογενείς τύποι

String

NumberBoolean

nullΣύνθετοι τύποι

Array

Object

27

JSON StringΑκολουθία 0 ή περισσοτέρων UNICODE χαρακτήρωνΠεριέχονται σε διπλά εισαγωγικά "..."Backslash escapes

Παράδειγματα ""

"data"

"data \"with quotes\""

28

JSON NumberΧωρίς εισαγωγικά

Προσημασμένος δεκαδικός αριθμός ﴾διπλής ακρίβειας,κινητής υποδιαστολής﴿Παραδείγματα:

10 ﴾ακέραιος﴿ ‐10.45 ﴾πραγματικός﴿ 2.5e‐5 ﴾scientific notation﴿

29

JSON BooleanΧωρίς εισαγωγικάtrue ή false

30

JSON nullΧωρίς εισαγωγικάnull

31

JSON ArrayΔιατεταγμένο σύνολο τιμών

Οι τιμές εμπεριέχονται μεταξύ [] και χωρίζονται με , Παραδείγματα:

Πίνακας με Strings: ["red","green","blue"] Πίνακας με Numbers: [10, ‐20, 0.30] Πίνακας με διάφορους τύπους: [10, "red", false,null]

32

JSON ObjectΜη διατεταγμένο σύνολο από ζεύγη ονόματος/τιμής﴾unordered name/value pairs﴿Ένα JSON Object έχει 0 ή περισσότερα ζευγάρια πουεμπεριεχόνται σε {} Κάθε ζευγάρι έχει ένα όνομα και μία τιμήΤο όνομα είναι τύπου String

Η τιμή μπορεί να είναι οποιουδήποτε τύπου ﴾String, Number,Boolean, null, Object, Array﴿Το όνομα διαχωρίζεται από την τιμή με : Τα ζευγάρια διαχωρίζονται μεταξύ τους με ,

33

Παραδείγματα{"img":"web.jpg", "width":800, "height":600}

{ "user": "saiko", "enabled": true, "favorites": [10, 11, 20], "roles": [ {"id":"editor", "text":"Content Editor"}, {"id":"manager", "text":"System Manager"} ]}

34

Μορφότυπος JSONΕύκολα αναγνώσιμo/διαχείσιμo και από ανθρώπους και απόπρογράμματαΑναπαριστά εύκολα τις ευρέως χρησιμοποιούμενες δομέςδεδομένων ﴾records, lists, trees﴿Οι αλγόριθμοι ανάλυσης ﴾parsing﴿ είναι απλοί, γρήγοροι καισυνεπείς λόγω του απλού συντακτικού

Υποστήριξη UNICODEMimeType: application/json

35

Service‐oriented architecture

36

Η κεντρική ιδέαΥπηρεσίες που επικοινωνούν μέσω ενός πρωτοκόλλουεπικοινωνίας και είναι:

κατανεμημένες,

αυτοτελείς ﴾separately maintained & deployed﴿χαλάρα συνδεδεμένες ﴾loosely‐coupled﴿ανεξάρτητες της τεχνολογίας υλοποίησης ﴾technology‐neutral﴿ανεξάρτητες του κατασκευαστή ﴾no vendor lock‐in﴿

Σύνθεση της εφαρμογής μέσω της ολοκλήρωσης ﴾integration﴿των υπηρεσιών.

37

Ρόλοι

Service consumerService producer

Service broker38

SOA ΑρχέςService contract

MetadataCompositionAutonomyDiscovery

Reusability

39

ΥλοποίησηWeb Services ﴾SOAP, WSDL, UDDI﴿

Remote‐procedure call ﴾RPC﴿Message‐driven middlewareRESTful APIsκ.ά

41

ΖητήματαStateful vs StatelessΑπόδοσηΠολυπλοκότηταΈλεγχος και επαλήθευση ﴾testing﴿

42

Η Αρχιτεκτονική Representational StateTransfer ﴾REST﴿

43

RESTful APIsΥπάρχουν παντού ﴾Web, Microservices, IoT﴿Σχεδόν πάντα με υποστήριξη για JSON

44

Τι είναι το RESTΈνα αρχιτεκτονικό στυλ για τη λειτουργία του ΠαγκόσμιουΙστού ﴾ή, γενικά, κατανεμημένων συστημάτων﴿Οριοθετεί αρχές, περιορισμούς και βασικές λειτουργίεςΑνεξάρτητα της γλώσσας προγραμματισμού, τουπρωτοκόλλου επικοινωνίας ή του είδους των δεδομένων

45

ΣυνοπτικάΤέσσερις βασικές έννοιες:

Resources, Representations, Requests, Responses

Έξι βασικές αρχές:

Client‐server, Stateless, Cacheable, Layered System, UniformInterface, Code on demand ﴾προαιρετικά﴿

46

ΟφέληΗ σωστή χρήση των RESTful αρχών βελτιώνει όλα τασημαντικά χαρακτηριστικά μιας αρχιτεκτονικής:

Απόδοση

ΚλιμάκωσηΑπλότηταΕπεκτασιμότηταΑξιοπιστία

47

1η RESTful Αρχή

Client – Server

Πλήρης διαχωρισμός ενδιαφερόντων ﴾separation of concerns﴿μεταξύ client & server

Χρήση ομοιόμορφης διεπαφής ﴾uniform interface﴿ για τηνεπικοινωνία τους

Παράδειγμα: ο client δεν πρέπει να «ενδιαφέρεται» για το datastorage, ο server δεν πρέπει να «ενδιαφέρεται» για το userinterface

48


Stateless

O server δεν αποθηκεύει καμιά πληροφορία για το state τηςεφαρμογής κατά την επικοινωνία του με τον client

Το ακριβές application state τηρείται μόνο από τον client

Αλλά, προφανώς, ο server μπορεί να αποθηκεύει πληροφορίεςτου user session σε κάποια βάση δεδομένων

49


Cacheable

O client πρέπει να μπορεί να αποθηκεύσει προσωρινάεπιλεγμένα responses από τον server

Ο server πρέπει να υποδεικνύει στον client ποια responsesμπορούν να αποθηκευθούν προσωρινά και ποια όχι

Παράδειγμα: χρήση κατάλληλων cache headers του HTTP

50


Layered System

O client πρέπει να μπορεί να συνδεθεί είτε με τον end serverείτε με κάποιον ενδιάμεσο server, χωρίς να μπορεί να«διακρίνει» τη διαφοράΟι ενδιάμεσοι server πρέπει να μπορούν να προσθέτουνλειτουργικότητα: π.χ. caching, authorization, security, κτλ.

Παράδειγμα: Web proxies, N‐tier architectures

51


Code on demand

Ο client πρέπει να μπορεί να εκτελέσει κώδικα πουπροέρχεται από τον server δυναμικά ﴾π.χ. applets, scripts,κτλ.﴿Προαιρετικά

52


Uniform Interface

Η πλέον σημαντική αρχή!Αναγνωριστικά πόρων ﴾Resource Identification﴿

Διαχείριση πόρων μέσω αναπαραστάσεών τους﴾representations﴿Hypermedia as the engine of application state ﴾HATEOAS﴿

53

Με απλά λόγιαΟ client στέλνει requests στον server χρησιμοποιώντας URIsγια τον προσδιορισμό των resources ﴾και τωνrepresentations﴿.Τα resources διαχωρίζονται από τα represenations: ο serverμπορεί να στείλει τα στοιχεία ενός resource σε μορφή XML,JSON, κτλ.O client, κατέχοντας οποιοδήποτε representation ενόςresource, μαζί με ενδεχόμενα metadata, μπορεί νατροποποιήσει το αντίστοιχο resource.

54

Με απλά λόγια ﴾συνέχεια﴿Τα responses που στέλνει ο server έχουν όλη τηναπαιτούμενη πληροφορία που απαιτείται για το σωστό τουςχειρισμό από τον client ﴾μορφότυπο, caching, κτλ.﴿HATEOAS: o client επικοινωνεί με τον server μόνο μέσωδυναμικά παρεχόμενων hypermedia ﴾π.χ. hyperlinks﴿.Δηλαδή, ο client δεν χρειάζεται να γνωρίζει από πριν κάποιοserver ή κάποιο interface ﴾όπως στις παραδοσιακές SOA ήστο RPC, κτλ.﴿. Αρκεί μόνο να μπορεί να «καταλάβει» τηλειτουργία των hypermedia.

55

RESTful Web Service ﴾API﴿Αποτελείται από:

Ένα HTTP base URL ﴾REST endpoint﴿Ένα ή περισσότερα MimeType για τα representations

HTTP Methods: GET, PUT ή PATCH, POST, DELETE

56

ΠαράδειγμαΈστω μια συλλογή ﴾collection﴿ από στοιχεία ﴾items﴿.

Υπάρχουν δύο βασικά endpoints: [baseURL]/items : Ενέργειες στη συλλογή ﴾εν συνόλω﴿. [baseURL]/items/id : Ενέργειες στο στοιχείο ﴾ειδικά﴿.

REST Calls GET [baseURL]/items

PUT [baseURL]/items/32

57

ΣυλλογέςHTTPMethod

Ενέργεια

GET

Εμφάνιση της λίστας με τα elements του collection,παρέχοντας το αντίστοιχο URI για το καθένα καιενδεχόμενα πρόσθετα στοιχεία ﴾π.χ. metadata﴿καθώς και σελιδοποίηση ﴾αν υποστηρίζεται﴿.

PUTΑντικατάσταση του υπάρχοντος collection με νέοcollection ﴾αν υποστηρίζεται﴿.

POST Προσθήκη νέου element στο υπάρχον collection.

DELETEΔιαγραφή του υπάρχοντος collection ﴾ανυποστηρίζεται﴿.

58

ΣτοιχείαHTTPMethod

Ενέργεια

GETΑνάκτηση μιας αναπαράστασης τουσυγκεκριμένου item.

PUT ήPATCH

Τροποποίηση του συγκεκριμένου item.

POST Δε χρησιμοποιείται ευρέως για items.

DELETE Διαγραφή του συγεκριμένου item.

59

SOA & RESTΈνα σύνολο από RESTful HTTP end‐points που ανταλλάσσουνδεδομένα σε μορφή JSON

Ενδεχομένως ο απλούστερος τρόπος υλοποίησης μιας SOA

60

Microservices

61

ΚωδικοποιημέναMicroservices = SOA + Unix Principles + Agile + DevOps

62

Monolithic Server‐side ApplicationsA single logical executableCloud deployment issues:

Small changes ‐> rebuild and redeploy the whole app

Scalability ‐> scale it all or not at all

63

ΧαρακτηριστικάComponentization via services

As in SOA

Organized around business capabilitiesCross‐functional teams, as in Agile

Products not projectsA team should own a productYou build it, you run it

Smart end‐points, dumb pipesSimple communication ﴾Unix‐style﴿

65

Decentralized governanceEach team governs the implementation details of itsproduct

Decentralized data managumentDifferent datastore per service/app

Infrastructure automationBuild & test automationContinuous delivery & deployment

Design for failureSophisticated monitoring & logging

66

Τεχνολογία Λογισμικού - NTUA · 2020-06-04 · Σχολή...

Documents

Transcript of Τεχνολογία Λογισμικού - NTUA · 2020-06-04 · Σχολή...