Frontend arkitektur - sklintyg/minaintyg GitHub Wiki
Här hittar du en genomgång av viktiga koncept för att kunna utveckla i Mina Intyg applikationens frontend. Du förutsätts vara utvecklare och känna till hur angularJS fungerar och är uppbyggt.
##Ramverk & Verktyg Frontend i Mina Intyg är baserad på följande ramverk
- angularjs
- angular-ui-bootstrap
- angular-ui-router
- bootstrap
- jquery
- webjars
Koden som utgör frontend är distribuerad i 3 olika repositories:
###common
Gemensamma komponenter som används av flera intygstyper i applikationen är samlade under:
/web/src/main/resources/META-INF/resources/webjars/common/minaintyg/js
Till skillnad från den mer komplexa applikationen webcert är koden organiserad utifrån typ av komponent snarare än per feature:
/controllers
/directives
/filters
/services
messages.js (gemensamma resource keyes)
module.js (module definition)
module-deps.json (listar dependencies)
common-delen av min intyg byggs enligt samma princip som andra moduler i intygsprojekten.
###intygstyper
Varje intygstyp har ett eget subprojekt under intygstyper repot. Delarna som implementerar funktionalitet för Mina Intyg för en intygstyp ligger under /src/main/resources/META-INF/resources/webjars/<intygstyp>/minaintyg. Alla intygstyper implementerar Mina Intyg funktionalitet för att:
- visa en innevånaranpassad "read-only" vy av ett intyg
- lista mottagare och välja att skicka vidare intyget dit.
I intygstyper wiki finns lite mer förklaring kring modulsystemet.
En gemensam struktur för alla intygstyper är:
/css (intygstyp-specifika css regler/overrides)
/img (intygstyp-specifika bilder)
/js
/controllers
messages.js (intygs-specifika message-resource-keys)
module.js (modul deklaration)
module-deps.json (ingående dependencies)
router.js (ui-router state definition - för vissa inbakad i module.js)
/views (vyer/funktioner som moduler implementerar)
error.html
recipients.html
send-summary.html
sent-cert.html
view-cert.html
###minaintyg
Under /web/src/main/webapp finns klienddelarna av Mina Intyg. Koden här omfattar själva skelettet för applikationen som navigation, listning av intyg mm som inte är intygstypsspecifikt.
├── WEB-INF
│ └── pages (innehåller bla start.jsp - entrypoint för /app.js)
├── app
│ ├── base
│ │ └── app.js (o-inloggad app)
│ ├── directives
│ ├── filters
│ ├── ie
│ ├── partials
│ ├── services
│ ├── views (vy + controllers grupperat per feature)
│ │ ├── about
│ │ ├── consent
│ │ ├── error
│ │ ├── help
│ │ └── list
│ ├── app-deps.json (definerar appens dependencies)
│ ├── app.js (main app definition och bootstrapping)
│ ├── app.min.js (genererad minifierad fil med alla js+templates)
│ ├── messages.js (resource-keys för dessa delar)
│ ├── router.js (ui-router definition)
│ └── templates.js (genererad fil med alla .html templates)
├── css
├── health-check (pingdom jsp util)
├── img
├── mvk-topbar (statiska resurser för att få till mvk topbar utseende)
├── error.jsp
├── index.jsp (Default startsida med inloggning - startar base/app.js)
├── version.jsp (versions info)
└── welcome.jsp (dev login funktioner)
Applikation har 2 olika entrypoints, app/base/app.js som används för index.jsp, error.jsp etc samt app/app.jssom startar den fulla applikationen efter inloggning.
##Applikationsskikt Mina Intyg klienten innehåller standard angular komponenttyper och konstruktioner, där det framförallt har framtagits en del återanvändbara directives för att visa mvk-navigation (mvk-top-bar) och för att visa/skicka intyg (mi-field mm)
##Modulladdning - Bootstrapping av applikationen Precis som för webcert används en egen bootstrapping för att dynamiskt ladda de klientresurser som applikationen behöver (baserat på de intygstyper som finns aktiverade i systemet).
Som standard laddas den minifierade varianten av resurser, men kan overridas av en miljövariabel. För att vid utveckling starta appen med ominifierade resurser startar man applikationen med:
minaintyg/web>$ mvn jetty:run -Dminaintyg.useMinifiedJavaScript=false