2sxc 9 is out and it's bringing the future to DNN. The foundation is now based on EF Core, new UIs use Angular 4, a Dutch language pack was added and way more. In this post I would like to tell you more about the Angular 4 integration.
2sxc is a Material Girl
The first thing you'll notice with 2sxc 9 is the new look, based on the material design paradigm. Here's a quick look at the new In-Page UI with FABs (Floating Action Buttons):
2sxc and Angular 4
We're fully commited to modern JS development stacks like React and Angular. For consistency, our drug of choice for 2sxc UIs is Angular - now Angular 4. It's impossible to refactor an application like 2sxc in any reasonable time, so our first focus is the end-user experience - and the first part we're recreating is the Quick-Dialog-Experience.
As you can see, it's almost the same as before, but with important changes:
- It's not inline any more, so the preview of the page perfect
- There is now only one quick-dialogs on screen, making it easier to use
- The quick-dialog floats in from above allowing you to scroll and see your content - this is also in anticipation of better mobile editing
Here's another view, with App-configuration buttons:
We're not done yet :) - this release 9.0 is especially made for the International Star-Wars day, but in about a week we'll deliver a nicer tile-based selector instead of the drop down, so stay tuned.
Angular 4 Pains and Lessons Learned
A word of warning to all you Angular lovers - going to Angular 4 has a steep and rewarding learning curve. I would just like to give you a quick overview of things we ran into which took "longer than expected" - if you know what I mean :)
- Typescript and new JavaScript with "let" and lambdas - things are very different here compared to the old JS-style programming
- Observables instead of promises - very different way of programming, gotta get used to it
- Reconfiguring $http is very different - no more $httpProvider.defaults... instead you have to "inherit" the http-class and specify it in the depedency injection...
- ...and that's very important, because DNN can't handle http-requests without the special, secret headers :)
- Modules / Components are very different - took some time to get into that
- Routing is special - again a learning curve
- The CLI, AOT and special compiles of Angular-code
- Paths to script-loading is fairly tricky, because angular CLI provides a cache-breaking mechanism which we cannot use in DNN
- ...and more
I'll tell you way more at my Angular session at DNN-Connect 2017 - see you there!
Love from Switzerland,
Daniel & Christoph & Luca
PS: Image courtesy to StarWars.com
PPS: Download the latest 2sxc on Github now :)