Sitefinity 8.1 for MVC and Front-End Developers

July 22, 2015 Digital Experience, Sitefinity

Sitefinity 8.1 is not the first release with a major investment in MVC and Front-end technology. For over a year and a half a dedicated team of engineers has been working full time on improving the development story under the codename “Project Feather”. Since then the team has released an open source UI framework under that name, along with multiple other enhancements of the core Sitefinity product and its support for MVC. In this blog post I’m going to cover what Feather actually is, how does it benefit you and what’s in it for you in Sitefinity 8.1.


What is Sitefinity Feather

For those of you who are not aware of Project Feather, you can think of it as a combination of framework and components that provide a new, modern way of developing for Sitefinity. Here is brief(-ish) overview to help you understand what the framework consists of:


  1. Resource packages. This is a brand new way to template Sitefinity utilizing pure MVC and front-end technology. The Feather way of doing things includes a packaging framework that helps you to combine all your stylesheets, scripts and assets together with your grid systems, Razor-based templates and widget designers. It’s everything your project needs from a front-end perspective in one clean, well organized folder. The beauty of it - it is all convention based - which aligns great with a very scalable integration infrastructure. Deploying and registering all your front-end work is as simple as moving a folder, which means that a simple commit will take care of all your changes in Sitefinity, register all necessary templates and widgets - there is no configuration to fiddle with. Those of you who work with continuous integration and continuous delivery will especially appreciate that fact. We also provided very mature Bootstrap-based resource package with styling for every widget, as well as multiple examples with other frameworks, as Feather will support any framework or custom styling necessary - it gives you full control of the output.  In addition Front-end devs can now easily use Sublime or their IDE of choice, as the templates and packages don’t require Visual Studio - they are simply files and folders.

 

2. MVC-based widgets. MVC support is not new in Sitefinity and has been available for over 3 years at the point of writing this blog post. Initially we introduced two modes of supporting MVC - Hybrid and Pure mode. Hybrid meant that you could use WebForms and MVC together at the same page. Hybrid mode provided a very convenient solution to MVC developers, allowing them to touch nothing but MVC but still utilize any legacy code they have in WebForms or our out of the box Webforms-based widgets. For most part it took care of hiding the WebForminess from you and was a valid way of developing large enterprise applications using MVC and will continue to be fully supported. However in hybrid mode you still got more WebForms than zero, and very often our community wanted full control over every single line of what Sitefinity generates, not just what your custom code generates, and only pure MVC could provide that. But when you switched to pure mode, you found zero widgets in the toolbox - you had to develop everything from scratch - content blocks, images, news listings and so on. So the team set on a mission to deliver every stock widget directly to you, fully templatable, open source and in pure MVC form. The progress on this has been amazing and 21 new widgets have been added just between March and today. Naturally, the framework also lets you build your own MVC widgets and ships some goodies such as KendoUI for you to use, so that you can easily get very creative and deliver the best UI for your applications. 

 

 3. Mobile-first - we talk about the Feather framework being mobile-first and this is for two reasons.

a) All of the default widget templates are shipped responsive - your navigation can be Bootstrap based, SemanticUI based, it doesn't matter, but all our code will respect the framework's responsive conventions and rules. 

b) Feather provides a way to “wrap Sitefinity” around frameworks such as Bootstrap and make them drag and droppable - and that doesn’t just mean elements like navigation and search, but it also means layouts. You can register html files with your Bootstrap grid elements (containers, 6+6 layouts, 3+3+3+3 layouts etc.) and they will immediately show up in the Sitefinity Layout Builder, beautifully responsive - and that's not just true for Bootstrap, but for any other framework or custom front-end styling out there. Feather already ships 4 grid systems(Default, Bootstrap-based, SemanticUI-based and Foundation-based) but your template can define it’s own containers and grids and business users will get to drag and drop them to pages and fill them with content.

4. Angular JS-based designer framework

Designers are the back-end screens that end users can use to manage widgets. For example if you build a grid widget that connects to a data source, you can let your business users filter the data, configure paging, sorting and various other parameters directly in Sitefinity, making your widget a “mini-application” with it’s own mini back-end. This concept is extremely powerful as it enables Sitefinity developers to only ship a widget once and give power to business users to reuse it according to context. The AngularJS based designer framework helps you build out these widget designers easily and with clean and simple Front-end development technology.

 

5. Client-side components

Client-side components are little lego blocks of “sitefinity-like” experiences such as widget designers. Here is where they come from. When the Feather team was redesigning all the Sitefinity functionality with MVC and AngularJS they had to develop a lot of interesting client-side functionality - Image uploaders and image selectors for the image widget, HTML editors for the content block widgets, drag & drop sortable lists for the Dynamic Content widget and so on. What the team did is package these various functional in client-side AngulerJS-based components that you can simply reuse. Some of these components are very sophisticated and may have taken us weeks to develop, but you get to reuse them with a few lines of code and build those “sitefinity-like” interfaces right within Sitefinity. And with the widgets being open source you can also see exactly how we use them and learn from that. The client-side components come in 3 flavors:

  1. Selectors - ready made AngularJS directives that help you select content, pages, images and so on as a part of your experiences. Let’s say you are developing a banner rotator widget and you want the users to be able to select their images - you would simply plug an image selector component in this case.

  2. Field directives - these are AngularJS directives help you select and display some metadata such as an image, URL or tags. These field directives encapsulate the full logical flow of maintaining a field. Let’s say you have an image field - if an image doesn’t exist it will prompt you to upload or select existing image, if you upload it will ask you for metadata and library for the image to be stored into, if an image is already selected it will give you the ability to change it. Something like that might take you weeks to develop, but now you can utilize this information very quickly

  3. Custom directives - those are AngularJS directives for more generic uses - adding search boxes, sort boxes, date- time pickers drag & drop lists and so on to your designers.

6. MVC Improvements

As a part of the Feather initiatives, the Sitefinity Core Framework has seen multiple new and exciting improvements such as built-in Master/Detail views, built in filtering functionality, ability to base page templates on MVC layouts and so on. Some of the improvements are capabilities that don’t even exist in MVC itself. For example you can compile an MVC widget together with the Razor View in a separate assembly and just dropping this assembly into a Sitefinity project can register all necessary widgets and templates based on convention. This allows you to consider each widget as a mini-application and built its own delivery pipeline complete with all the necessary unit and integration tests.

There are various other small and large improvements and we’re excited to continue delivering new and new functionality to our MVC and Front-end Development Community. In the second part of the blog post I will discuss what is new and hot for Sitefinity 8.1 for developers.

What’s new in Sitefinity 8.1


The 8.1 release aligns very well with our continued effort to become the most modern development framework. Here are some of the MVC and Front-end goodies that this release introduced.


  1. Support for MVC 5 and .NET 4.5. This lets you switch the target framework in Sitefinity and use some of the latest and greatest features, such as Async and Await within your .NET code or Attribute Routing in your MVC widgets. It also helps you include packages and assemblies that target the newer framework. We’ve also updated core libraries like Kendo UI, angular JS and the Telerik UI Controls that ship with Sitefinity.

  2. 21 new MVC widgets and that’s just since the 8.0 release at the end of March.  Comments, Reviews, Classifications, Lists and many new widgets are now available in a pure MVC version with an MVC/Angular JS based designer and you can browse through their source code on GitHub and even contribute to them.

  3. 8 new selectors including blog selector, user selector and video selector. All selectors are packaged as reusable AngularJS directives.

  4. New MVC APIs and Enhancements including the Ability to Define Relative Routes and ability to include script and style resources in various sections of a view



And in case you are like me and like charts, here is one that shows why 8.1 is so exciting for MVC developers and how much functionality was added in just a few short months:

 
This part of the page will be loaded later.

 

For more details on what is included feel free to look at the Project Progress page.

Here are some important resources for you to look at when starting to develop with MVC and Sitefinity:

  1. Getting started with Feather

  2. Github Repository with all open source widgets and components

  3. Webinar covering developing with MVC in Sitefinity 8.0

Have a question or feedback? Feel free to comment on this thread, but there are also multiple other great places where you will find Feather experts: 

  1. There is an extremely active community of MVC developers in Google+ and the Sitefinity Forums

  2. Ask us directly by submitting a ticket. Even if you are just evaluating Sitefinity and running a trial version, you get support for the duration of your trial.

Have in mind that Feather is it's own separate module and new widgets and features are constantly added to the open source repository and you don't need to wait until 8.2 to upgrade to them. Follow the Google+ community for new releases and general developer updates! 

 Happy coding!

Svetla Yankova