Embed Size (px)
Citation preview
ASP.NET 5 | MeetUp | 19-NOV-2015
1 JAAR ASP.NET5
Onze ervaringen
■ wifi: ‘DigAnt Free Wifi’■ hashtag: #digantcafe■ instagram: @digipolis_antwerpen■ twitter: @dgplsantwerpen■ slideshare: http://www.slideshare.
net/digipolisantwerpen■ linkedin: https://www.linkedin.
com/company/digipolis■ facebook: https://www.facebook.com/Digipolis/
Some Info
ASP.NET 5
Bram Van Handenhoven | PL
“If I’d asked people what they wanted,they would have asked for a faster horse.”
Henry Ford
Projecten, platformen & vernieuwing
Project → Vereisten
Geïntegreerde architectuur op basis van ervaringen platform A-Stad
Uitgangspunten & aanpak
Modulaire ontwikkelingTijdens analyse en ontwikkeling focus op herbruikbare componenten
Compacte opleveringenmet focus op performantie en gebruiksvriendelijkheid (UX – User Experience)
Stapsgewijs & gecontroleerd evolueren naar een nieuwe platform, rekening houdend met
minimale impact op eindgebruikers, technische haalbaarheid en de parallelle projecten
Future-proofWebgebaseerd
LicentievrijCombo met Linux | Ubuntu | PostgreSQL | Atlassian ALM
Fade-in/fade-out met bestaande (.Net) technologieën en projecten
Technologische keuzes
→ ASP.NET 5 ← beste match tussen
techn(olog)isch-organisatorische vereisten en open source
Jasper Van Proeyen 19.11.2015
Tink
Voorgeschiedenis
Werking Stad
■ Tientallen bedrijven■ Honderden applicaties■ Nood aan centraal gedachtegoed
UX gedachtegoed
Naar gebruikers:
■ Consistentie■ Herkenbaarheid■ Uniforme layout & (huis)stijl
UX gedachtegoed
Naar developers:
■ Sneller kunnen werken, minder overhead■ Herbruikbaarheid■ Betere service op front-end vlak
Proces
■ Concrete vraag■ User stories■ Wireframes■ (Web) apps
Handtekenplatform
Verslagmodule
Leesmodule
Administratieve toepassingen
■ Lijsten■ Formulieren■ Contextuele search, complexe filtering■ CRUD-acties■ …
1+1=1
UX gedachtegoed + terugkerende elementen
= één front-end framework voor alle interne
tools van de Groep Stad Antwerpen…
Tink framework
Wat is Tink?
Tink is een op (Twitter) Bootstrap geïnspireerd, in-house ontwikkeld front-end framework dat als doel heeft om op een modulaire manier complexe en data-rijke applicaties duidelijk en gebruiksvriendelijk vorm te geven.
Wat is Tink niet
■ Twitter Bootstrap:● Groot● Kan voor alles dienen● Styling (CSS) + scripting (JS)
■ Het warm water heruitgevonden
Wat is Tink wel
■ Twitter Bootstrap fork■ Focus op administratieve toepassingen■ Kern + aparte componenten■ Technologie-onafhankelijk
Wat is Tink uiteraard ook
■ Responsive■ Mobile-first■ Industry standards:
● HTML5● CSS3
Nog enkele voordelen
■ Twitter Bootstrap syntax■ Open source■ Eén op één naast wireframes
Componenten
■ Gemakkelijk te gebruiken■ Modulair■ Mix met externe componenten■ Momenteel enkel AngularJS
Themes
■ Digipolis■ Stad■ OCMW■ Politie■ Brandweer
Demo
De praktijk
Gebruik
bower install `tink-component`
http://github.com/tinkkit
enhttp://tink.digipolis.be
Verbetering
GitHub fork
Code-aanpassingen
Pull request
Eigen component
GitHub fork van Tink skeleton:http://github.com/tinkkit/tink-skeleton-angular
Gebruik Grunt tasks
Sharing is caring
Bedankt
ASP.NET 5 Front-end demo
Willem De Nys | Ontwikkelaar
■ WWWroot
■ Dependencies
■ Bower.json
■ Gruntfile.js
■ Package.json
■ Project.json
Structuur Visual Studio 2015
■Whitelist
■Vergemakkelijkt standaard taken
■Geautomatiseerd (Grunt, Gulp)
wwwroot
■ Packet managers.● NPM (serverside packages)
● Bower (clientside packages)
Dependencies
Demo
Bower.json
■ Toevoegen in lijst
■ Versie bepalen
■ Enventueel
"exportsOverride": { "tink-timepicker-angular": { "js": "dist/*.js" }}
Gruntfile.jsbower: { install: { options: { targetDir: "wwwroot/lib", layout: "byComponent", cleanTargetDir: false, cleanBowerDir: false, verbose: true } }}
■ Bower install
■ Files kopiëren naar wwwroot
■ Index.cshtml genereren includeSource: { options: { basePath: "wwwroot/", baseUrl: "~/", }, myTarget: { files: { "WebUI/Views/Home/Index.cshtml": "WebUI/Views/Home/IndexTemplate.cshtml" } }}
Gruntfile.js
■ JS/html files in wwwroot te krijgen■ Sass compilen■ Files “watchen”■ Custom tasks definiëren
grunt.registerTask("default", ["clean:app", "clean:lib", "bower:install", "clean:nodemodules", "sass:dev", "copy:scripts", "copy:styles", "copy:templates", "copy:content", "includeSource"]);
Angular injectie
■ Externe directives injecteren
■ Eigen directives: duplicatie tegengaan onderhoudbaar
Directive gebruiken
Voorbeeld
DEVELOPMENT MET ASP.NET 5
Steven Vanden Broeck
JANUARI 2015
● Vernieuwing van de development stack●● Open source
● Recentste technologieën
● Modulair
● Toekomstgericht
EUHM...
ASP.NET 5 (formerly known as ASP.NET vNext)
ASP.NET 5 OPEN SOURCE
ASP.NET 5 MODULAIR FROM-THE-GROUND-UP
ASP.NET 5 TESTBAAR
ASP.NET 5 DNX RUNTIME
Multi-platform (dnx core voor Windows, Linux en OSX)
Side-by-side installaties
Project was al begonnen :
Web API met AngularJs front-end
omgezet naar ASP.NET 5 (beta 2) :
op 1 week
POC van 1 maand
werkbaar mits overhead
ASP.NET 5 VOOR DIGIPOLIS PROJECTEN
ASP.NET 5
ASP.NET 5 BETA
● Beta 2 (januari)
● Breaking changes bij elke nieuwe beta
● Namespaces
● Packages
● Classes/methods/properties/interfaces veranderd/verwijderd/verplaatst
●
● Servers en ALM stack ook telkens mee upgraden
ASP.NET 5 BETA UPDATES
ASP.NET 5 BETA UPDATES
ASP.NET 5 & WEB API
Unified framework (MVC + Web API)
Ontbrekende onderdelen in eerste beta’s
Cross-origin Resource Sharing (CORS)
Authenticatie
...
Ander gedrag
bv. Querystring mapping
ASP.NET 4.5 Web API :
http://myapp/klant?voornaam=Lef http://myapp/klant?voornaam=Lef&naam=Jebowski
KlantController :
public IHttpActionResult Get(string voornaam) public IHttpActionResult Get(string voornaam, string naam)
ASP.NET 5 & WEB API QUERYSTRING MAPPING
ASP.NET 5 Web API :
http://myapp/klant?voornaam=Lef http://myapp/klant?voornaam=Lef&naam=Jebowski
KlantController :
public IHttpActionResult Get(string voornaam) public IHttpActionResult Get(string voornaam, string naam)
ASP.NET 5 & WEB API QUERYSTRING MAPPING
ASP.NET 5 QUERYSTRING MAPPING
ASP.NET 5 QUERYSTRING MAPPING UNIT TESTS
● Linux & Mono
● Nieuw voor .NET’ers
● Mono :
● bijna hetzelfde maar soms toch verschillend
●
ASP.NET 5 & MONO
ASP.NET 5 DEVELOPMENT PC
OPEN SOURCE DATABASE
● PostgreSQL
● Met het nieuwe Entity Framework 7 ?
ENTITY FRAMEWORK 7 & POSTGRESQL
NPGSQL
NPGSQL COMMUNITY
NPGSQL ENTITY FRAMEWORK 7 PROVIDER
OPEN SOURCE CONTRIBUTIONS
NPGSQL ENTITY FRAMEWORK 7 PROVIDER
DANK U VOOR UW AANDACHT
