Website visitors, marketers and developers all demand fast results from the sites they visit and the software they use. The Sitefinity CMS 9.0 release tailors to these demands and brings a host of performance and productivity improvements to the mobile-first, convention-based UI and ASP.NET MVC development framework known as Feather and available as open source on GitHub.
The new release improves website performance of MVC-based widgets thanks to precompiled views and makes it easier for developers to create widget designers. It also comes with a new “Minimal” UI resource package to serve as a foundation for custom CSS when using Bootstrap is not an option as well as a set of new tutorials and code samples to get you started. Moreover, the Feather framework and MVC-based widgets are now enabled by default in the CMS and we recommend using them when starting new Sitefinity projects or improving existing ones to benefit from better performance, productivity and functionality compared to WebForms-based widgets and templates.
Precompiled Widget Views
With this release we wanted to improve performance by reducing the initial load time of pages. For instance, when a website visitor requests a page or a CMS user opens a widget designer in the administrative area for the first time, the system has to compile all widget views and their designers on the fly, which takes a good amount of time that is proportional to the number of widgets on the page. The solution was to ship the MVC-based widget views compiled in .dll files, a similar approach to what we did to increase performance for the out-of-the-box widgets based on WebForms.
However, we didn’t stop there with Feather. We wanted to deliver the same performance for your custom widget views and for any customizations you make to the stock MVC views. We also wanted to keep the luxury of not having to build your project after making each change so we made the pre-compilation execute on each build and provided а smart mechanism that allows you to see your changes without requiring a build. For instance:
-
If you change a widget view and build the project, the framework will render its pre-compiled version from the .dll file upon request.
-
If you make another change and don't build the project, the framework will render your latest changes upon request, ignoring the older precompiled .dll version. This behavior is configurable so the system always renders the precompiled views on a live production environment.
Even though this solution looked good, worked as expected and integrated seamlessly into the developer and front-ender workflows, we weren’t done yet. We also wanted to apply it for the frontend packages such as Bootstrap without requiring developers to do any extra work. It was indeed a challenge because the view names for each package are the same, which didn't allow us to pack them all into the SitefinityWebApp.dll file. The solution - write some fancy build definitions and produce separate .dlls with precompiled views for each resource package. It was an extra mile, but definitely worth the trouble - it finally felt like a job well done.
Widget Designer API Improvements
We continued our quest to make the developers life easier by simplifying the process of using client components in custom designer views. Previously, using a selector in a custom view required at least three steps:
-
Place the selector markup in the razor view (cshtml file)
-
Create a json file to register the script components
-
Create a scripts js file to register the angular modules
For many of our users, steps 2-3 were not very intuitive and often presented challenges for new users of the framework. Therefore, we applied some smart processing of the razor view and now the script components and angular modules are loaded automatically.
Minimal Resource Package
Due to popular demand, we decided to limit the frontend frameworks we ship to only Bootstrap and to facilitate frontend developers who wanted to create or integrate their own CSS framework with Sitefinity CMS. That’s why we created the “Minimal” resource package that comes with minimalistic HTML, leaving enough room for the frontend guys to do their magic and customize the styles and markup as they want without having to reinvent the wheel and start everything from scratch. The "Minimal" package is available as a separate download from the feather-packages github repo, just like the SemanticUI and Foundation packages that previously came pre-installed.
Tutorials and Code Samples
Sitefinity customers such as ABB, BNP Paribas and Dayton Superior leverage the Feather framework for their websites and many more firms are starting to do so as well. As such, we wanted to make it easier to get started with the UI and MVC framework so we created a larger and more helpful collection of samples. At first, our documentation was tailored to seasoned Sitefinity developers, however, we realized it was coming up short and that there was a need for real-world samples for common use-case scenarios. Thanks to the constructive feedback from our proactive developer community, we managed to identify the most common needs and created the following resources:
-
3 samples for customizing the Content block widget
-
2 samples for working with dynamic items
-
A complete tutorial for a custom widget with several selectors
-
A sample for using the image field in a custom designer view
-
A 5-step tutorial how to extend the default widget designer
-
Other new articles and improvements to existing articles
We are pleased about the new improvements in Sitefinity 9.0 and look forward to your feedback.
Mariush Minkov
Mariush joined Telerik in 2013 and he currently works as a Product Manager at Sitefinity CMS. He is focused on making Sitefinity the most advanced, flexible and and easy to use platform for developers.