Tämä artikkeli perustuu Seattlen Kaupunginyliopiston lippukiveeni. Tutkimukseni otsikko on ”Software Documentation and Architectural Analysis of Full Stack Development”. Tutkimukseni tavoitteena oli vähentää oppimiskäyrää avoimen lähdekoodin projektien ja full stack-kehityksen ymmärtämisessä, ja valitsen KESKIARVOPINON.
olen luonut seuraavat diagrammit Selkokartan avulla ymmärrettävämmäksi. Nämä UML-diagrammit perustuivat 4 + 1-arkkitehtuurimalliin:
- Ravintolavertaus
- Prosessinäkymä käyttäen Sekvenssikaaviota
- skenaario käyttäen Sekvenssikaaviota
- fyysinen näkymä käyttäen Käyttöönottokaaviota
- Kehitysnäkymä käyttäen Pakettikaaviota
- looginen näkymä Luokkakaaviota käyttäen
tutkimus keskittyi enemmän käyttöönottoon ja Pyyntö-ja Vastausvirtaan.
KESKIPINO on täyden pinon JavaScript-avoimen lähdekoodin ratkaisu. Se koostuu MongoDB, Express, Angular, ja Solmu.js.
sen ideana on ratkaista yhteiset ongelmat näiden kehysten yhdistämisessä, rakentaa vankka kehys päivittäisten kehitystarpeiden tueksi ja auttaa kehittäjiä käyttämään parempia käytäntöjä suosittujen JavaScript-komponenttien kanssa työskennellessään.
loppupää solmulla.JS
solmu.js on rakennettu käsittelemään asynkroninen I / o Kun JavaScript on event loop sisäänrakennettu asiakaspuolelle. Tämä tekee Node.JS nopea verrattuna muihin ympäristöihin. Tapahtumavetoinen / callback-lähestymistapa tekee kuitenkin solmun.js vaikea oppia ja debug.
solmu.js sisältää moduuleja, kuten MongoDB-objektimallinnuksen Mongoose ja Express web-sovelluskehyksen. Solmumoduulien avulla voidaan saavuttaa abstraktio, joka vähentää keskimmäisen pinon kokonaiskompleksisuutta.
back-end Express Framework
Express on Node-järjestelmän minimalistinen ja epänationaalinen sovelluskehys.js. Se on kerros solmun päällä.JS, joka on monipuolinen web – ja mobiilikehitykseen piilottamatta mitään solmua.js toiminnallisuus.
Front-end with Angular
Angular on Konekirjoituksella rakennettu web-kehitysalusta, joka tarjoaa kehittäjille vankat työkalut web-sovellusten asiakaspuolen luomiseen.
se mahdollistaa yksisivuisten verkkosovellusten kehittämisen, joissa sisältö muuttuu dynaamisesti käyttäjän käyttäytymisen ja mieltymysten perusteella. Siinä on riippuvuussuihkutus sen varmistamiseksi, että aina kun komponenttia muutetaan, muut siihen liittyvät komponentit muuttuvat automaattisesti.
tietokanta MongoDB
MongoDB on NoSQL-tietokanta, joka tallentaa tietoja BJSONIIN (Binary JavaScript Object Notation).
Mongodbista tuli solmun de facto-standarditietokanta.js Sovellukset täyttämään ”JavaScript everywhere” paradigma käyttäen JSON (JavaScript Object Notation) lähettää tietoja eri tasoilla (front-end, back-end, ja tietokanta).
nyt kun ne perusasiat on saatu alta pois, katsotaan näitä kaavioita.
Ravintolavertaus
koska halusin puuttua jyrkkään oppimiskäyrään, valitsin ravintolavertauksen, jotta käyttäjä ymmärtäisi ja säilyttäisi pyyntö-ja vastausprosessin täydessä stack-sovelluksessa.
asiakas (loppukäyttäjä) pyytää tilauksensa tarjoilijan (controller) kautta, ja tarjoilija luovuttaa pyynnön tilausikkunassa (service factory) olevalle henkilölle.
nämä kolme komponenttia muodostavat etupään palvelimen. Huoltotehdas on se, joka kommunikoi taustapäässä olevan Kokin (valvojan) kanssa. Kokki sitten nappaa tarvittavat ainekset (tiedot) jääkaappiin (tietokantapalvelin).
jääkaappi toimittaa tarvittavan materiaalin (tiedot) keittäjälle takapäähän. Kokki voi nyt käsitellä sen tiedon ja lähettää sen takaisin etupään huoltotehtaalle.
valvoja (tarjoilija) luovuttaa valmistetun aterian asiakkaalle (käyttäjälle). Asiakas voi nyt nauttia aterian (data).
Prosessinäkymä käyttäen Sekvenssikaaviota
kuka sitä käyttää tai mitä se näyttää:
- integraattorit
- suorituskyky
- skaalautuvuus
prosessinäkymässä näytän ensin etupään palvelimen ja loppupään palvelimen erikseen ja liitän ne sitten yhteen tietokantapalvelimen kanssa.
ensimmäisessä esimerkissä Kulmasovellus otettiin käyttöön kovakoodatulla jsonilla service.ts-tiedostossa (sijaitsee Huoltotehtaassa).
Kulmasovellus voi kommunikoida kolmannen osapuolen sovellusliittymien kanssa saadakseen tietoa ja näyttääkseen sen käyttäjälle.
meidän takapäässä, solmussa.JS application esimerkki alkaa kova koodattu JSON, jota voidaan käsitellä ja käyttää vastauksena.
tämä loppupää voidaan liittää kolmannen osapuolen sovellusliittymiin tai tietokantapalvelimeen JSONin saamiseksi, sen käsittelemiseksi ja sen lähettämiseksi takaisin pyynnön esittäjälle.
kun etupään palvelimen, taustapalvelimen ja tietokantapalvelimen prosessit on selitetty, näytän näiden kolmen palvelimen yhdistelmän alla:
kun http-pyyntö tehdään, etupää käynnistyy ja angular poimii pyynnön. Pyyntö välitetään sisäisesti kulmittain siten, että reitti lähettää pyynnön näkymästä katseltavaksi/malliksi.
View / Template pyytää ohjainta. Ohjain luo HTTP-pyynnön levolliseen (Edustustilasiirtoon) päätepisteeseen palvelimen puolelle, joka on Express/Node.js. Tämän jälkeen pyyntö välitetään sisäisesti Express/Node-ohjelmalla.js reitiltään ohjaimeen / malliin.
ohjain / malli tekee Mongoose ODM: n kautta pyynnön olla vuorovaikutuksessa tietokantapalvelimen kanssa, jolla on MongoDB. MongoDB käsittelee pyynnön ja vastaa kutsuun Express/Node.js.
Express / Node.JS lähettää JSON-vastauksen Kulmaohjaimeen. Kulmasäädin vastaisi sitten näkymällä.
Skenaarionäkymä käyttäen Sekvenssikaaviota
kuka sitä käyttää tai mitä se näyttää:
- kuvaa olioiden ja prosessien välisiä vuorovaikutuksia
skenaario edellä kuvattu liittyy käyttäjä käyttää kirjakaupan sovellus. Kun käyttäjä syöttää URL, JavaScript suoritetaan ja osuu reitittimeen front-end server, joka on Approuting Module. Approutingmoduuli kutsuu Bookscomponentia,joka lataa fetchbookit riippuvuusruiskeena.
fetchBooks luo tämän jälkeen HTTP-pyynnön taustapalvelimelle, jossa on reititin, ohjain ja malli pyynnön käsittelyä ja tietokantapalvelimen kyselyä varten.
tietokantapalvelin käsittelee kyselyn, ja back-end-palvelimen odottaessa nappaa datan ja lähettää sen takaisin etupään palvelimelle JSONin vastauksena.
etupäässä on nyt käyttäjälle näytettävät tiedot ja mallinäkymä.
fyysinen näkymä käyttäen Käyttöönottokaaviota
kuka sitä käyttää ja mitä se näyttää:
- järjestelmäinsinööri
- topologia
- tietoliikenne
käyttöönottokaavio näyttää 3 palvelinta: etupään, loppupään ja tietokannan. Etupäässä tarvitaan selainta, sillä kulmikkaat sovellukset ovat selainpohjaisia verkkosovelluksia.
taustapalvelin isännöi Solmuamme.JS Expressin kanssa solmun päällä.js. Expressissä on sovellus ja Mangusti sen päällä. Express hoitaa viestinnän sekä etupäässä että tietokannassa. Tietokantapalvelin sisältää vain MongoDB: n. Se käyttää JSONIA kommunikoimaan palvelimien välillä.
MEAN Stackin ensimmäisessä kokoonpanossa otamme käyttöön paikallisesti paikallisen koneemme (localhost) avulla etupään palvelimen, taustapalvelimen ja tietokantapalvelimen.
käytämme seuraavia oletusportteja: Kulmaportti 4200, solmu.JS / Express – portti 3000 ja MongoDB – portti 27017.
alla oleva kaavio esittää full stack web-sovelluksen UML-merkintänä.
siirryttäessä edelleen varsinaiseen tuotantoon, pilveen siirtyminen on meidän tietokantamme. MongoDB: lle valitsin MongoDB Atlasin pilviratkaisuksi.
viimeinen vaihe tuotannon käyttöönotossa on etukoodimme lataaminen Amazon S3: een ja taustakoodin lataaminen EC2: ssa AWS: llä. Ne kaikki kommunikoivat keskenään HTTP / HTTPS-päätepisteillä.
tässä on toinen kaavio, joka näyttää tuotantomme käyttöönoton ilman UML-notaatiota.
Kehitysnäkymä käyttäen Pakettikaaviota
kuka sitä käyttää ja mitä se näyttää:
- hjelmoijat
- Ohjelmistohallinta
kulmasovelluksen pakettinäkymä osoittaa, että jokainen kulmakomponentti tuodaan appmoduliin. AppModule ja AppRoutingModule ovat riippuvaisia BooksComponent. BooksComponent on riippuvainen BookDetailComponentDialog ja ApiService.
solmun pakettinäkymä.js-sovellus näyttää, että sovellus tuo kaikki CRUD-toiminnot (ohjaimet), kuten Nouda kaikki kirjat, nouda kirja, Päivitä kirja ja poista kirja. Myös kaikki CRUD-operaatiologiikka piilee mallikirjassa.
Logical View using Class Diagram
Who uses it and what it shows:
- Loppukäyttäjä
- toiminnallisuus
kirjakauppasovellus esitteli vain yhden luokan nimeltä kirja. Luokan jäsenet ovat: title, isbn, author, picture ja price. Menetelmät ovat: addBook, fetchBooks, fetchBook, updateBook ja deleteBook.
mallikirjan rakenne JSON-muodossa.
tässä muutamia videoita diagrammeista:
Documentation available on my GitHub:
Find me on LinkedIn. =)