Slides van de Digant Café meetup over onze ervaringen met ASP.NET 5: http://www.meetup.com/DigAnt-Cafe/events/226481805/

1. ASP.NET 5 | MeetUp | 19-NOV-2015
1 JAAR
ASP.NET5
Onze ervaringen

2. ■ 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

3. ASP.NET 5
Bram Van Handenhoven | PL

4. “If I’d asked people what they wanted,
they would have asked for a faster horse.”
Henry Ford
Projecten, platformen & vernieuwing

5. Project → Vereisten

6. Geïntegreerde architectuur
op basis van ervaringen platform A-Stad
Uitgangspunten & aanpak
Modulaire ontwikkeling
Tijdens analyse en ontwikkeling focus op herbruikbare componenten
Compacte opleveringen
met 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

7. Future-proof
Webgebaseerd
Licentievrij
Combo 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

8. Jasper Van Proeyen 19.11.2015
Tink

9. Voorgeschiedenis

10. Werking Stad
■ Tientallen bedrijven
■ Honderden applicaties
■ Nood aan centraal gedachtegoed

11. UX gedachtegoed
Naar gebruikers:
■ Consistentie
■ Herkenbaarheid
■ Uniforme layout & (huis)stijl

12. UX gedachtegoed
Naar developers:
■ Sneller kunnen werken, minder overhead
■ Herbruikbaarheid
■ Betere service op front-end vlak

13. Proces
■ Concrete vraag
■ User stories
■ Wireframes
■ (Web) apps

14. Handtekenplatform

15. Verslagmodule

16. Leesmodule

17. Administratieve toepassingen
■ Lijsten
■ Formulieren
■ Contextuele search, complexe filtering
■ CRUD-acties
■ …

18. 1+1=1
UX gedachtegoed + terugkerende elementen
= één front-end framework voor alle interne
tools van de Groep Stad Antwerpen…

19. Tink framework

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

21. Wat is Tink niet
■ Twitter Bootstrap:
● Groot
● Kan voor alles dienen
● Styling (CSS) + scripting (JS)
■ Het warm water heruitgevonden

22. Wat is Tink wel
■ Twitter Bootstrap fork
■ Focus op administratieve toepassingen
■ Kern + aparte componenten
■ Technologie-onafhankelijk

23. Wat is Tink uiteraard ook
■ Responsive
■ Mobile-first
■ Industry standards:
● HTML5
● CSS3

24. Nog enkele voordelen
■ Twitter Bootstrap syntax
■ Open source
■ Eén op één naast wireframes

25. Componenten
■ Gemakkelijk te gebruiken
■ Modulair
■ Mix met externe componenten
■ Momenteel enkel AngularJS

26. Themes
■ Digipolis
■ Stad
■ OCMW
■ Politie
■ Brandweer

27. Demo

28. De praktijk

29. Gebruik
bower install `tink-component`
http://github.com/tinkkit
en
http://tink.digipolis.be

30. Verbetering
GitHub fork
Code-aanpassingen
Pull request

31. Eigen component
GitHub fork van Tink skeleton:
http://github.com/tinkkit/tink-skeleton-angular
Gebruik Grunt tasks
Sharing is caring

32. Meer info
http://tink.digipolis.be
http://github.com/tinkkit
tink@digipolis.be

33. Bedankt

34. ASP.NET 5
Front-end demo
Willem De Nys | Ontwikkelaar

35. ■ WWWroot
■ Dependencies
■ Bower.json
■ Gruntfile.js
■ Package.json
■ Project.json
Structuur Visual Studio 2015

36. ■Whitelist
■Vergemakkelijkt standaard taken
■Geautomatiseerd (Grunt, Gulp)
wwwroot

37. ■ Packet managers.
● NPM (serverside packages)
● Bower (clientside packages)
Dependencies

38. Demo

39. Bower.json
■ Toevoegen in lijst
■ Versie bepalen
■ Enventueel
"exportsOverride": {
"tink-timepicker-angular": {
"js": "dist/*.js"
}
}

40. Gruntfile.js
bower: {
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"
}
}
}

41. 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"]);

42. Angular injectie
■ Externe directives injecteren
■ Eigen directives:
duplicatie tegengaan
onderhoudbaar

43. Directive gebruiken

44. Voorbeeld

45. DEVELOPMENT MET ASP.NET 5
Steven Vanden Broeck

46. JANUARI 2015
● Vernieuwing van de development stack
●
● Open source
● Recentste technologieën
● Modulair
● Toekomstgericht

47. EUHM...

48. ASP.NET 5 (formerly known as ASP.NET vNext)

49. ASP.NET 5 OPEN SOURCE

50. ASP.NET 5 MODULAIR FROM-THE-GROUND-UP

51. ASP.NET 5 TESTBAAR

52. ASP.NET 5 DNX RUNTIME
Multi-platform (dnx core voor Windows, Linux en OSX)
Side-by-side installaties

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

54. ASP.NET 5

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

56. ASP.NET 5 BETA UPDATES

57. ASP.NET 5 BETA UPDATES

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

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

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

61. ASP.NET 5 QUERYSTRING MAPPING

62. ASP.NET 5 QUERYSTRING MAPPING UNIT TESTS

63. ● Linux & Mono
● Nieuw voor .NET’ers
● Mono :
● bijna hetzelfde maar soms toch verschillend
●
ASP.NET 5 & MONO

64. ASP.NET 5 DEVELOPMENT PC

65. OPEN SOURCE DATABASE
● PostgreSQL
● Met het nieuwe Entity Framework 7 ?

66. ENTITY FRAMEWORK 7 & POSTGRESQL

67. NPGSQL

68. NPGSQL COMMUNITY

69. NPGSQL ENTITY FRAMEWORK 7 PROVIDER

70. OPEN SOURCE CONTRIBUTIONS

71. NPGSQL ENTITY FRAMEWORK 7 PROVIDER

72. DANK U VOOR UW AANDACHT