When starting a new Episerver project, you will need to pick a Javascript framework to use within the website. Episerver is a framework and the architecture tries to be unopinionated. As an implementor, it is up to you to decide what to implement within your website. Often, for people who are new to Episerver, there seems to be a preconception about how intrusive Episerver is.

A good example of a preconception occurred to me the other day. I was interviewing for a front-end developer who hadn't had any Episerver experience. He had downloaded the Alloy sample site. The sample site uses an older version of JQuery. The sample site is updated, however, it is updated infrequently, compared to how quickly the world moves. His assumption was that Episerver could only work with this old version of JQuery... this is definitely not the case!

A standard website written with Episerver at its core is just a Microsoft ASP.NET website. Episerver provides a framework to create dynamic content added within the CMS onto a website. A good analogy of the difference between your website and the Episerver part can be thought of in terms of a meal. Your website in this strange example could be thought of as a salad bar 🥗🥗🥗 You can add whatever you want to the salad, it is up to you, lettuce, tomatoes, meat, egg, etc... it's your call. Episerver can be thought of in terms of a garnish that you add to your salad. It enhances your websites experience by providing hooks into its CMS platform. These hooks allow you to improve your site. So the simple answer to what Javascript framework you want to use with Episerver is... it's 100% up to you. You can use anything 💖💖💖.

Dojo

Another misconception when it comes to Javascript and Episerver is that you have to use DojoJS. Again, this is more a myth than a fact. Episerver uses Dojo within the Episerver product itself. Just because the Episerver UI uses Dojo does not mean you have to use Dojo on the front end of your website. The Dojo framework will be used by the Episerver product, you on the other hand don't need to worry about this. As a front-end designer, all you really care about is that Episerver allows you to do you. To repeat the mantra, you can use whatever Javascript framework you want to build your website. If you want to extend the Episerver product and change how the CMS works, you MAY need to use Dojo. Customising the Episerver editor is an advanced topic and a pretty niche requirement. Do not confuse this editor UI customisation with the frontend website build.

So... Episerver and Javascript?

I'm hoping that we have established that you can use whatever Javascript framework you want on your site. This brings us on to the next question, it's all very well saying that I can use any framework, however, I still need help deciding which one I should use! As the web is progressing, more coding is being done in the browser by Javascript. This trend in Javascript usage will continue to increase for the foreseeable future and keeping up-to-date with the latest frameworks, is probably a blog onto itself!

Googling the problem will likely make you more confused. Online, you will see countless varying opinions about which framework is the best. From my experience, there is no such thing as the perfect framework. The framework that you favour might even vary from project to project. When it comes to picking a framework, I think there are several key considerations. This post is written in April 2017 and in a few years time, things will have changed a lot. The purpose of this tutorial isn't to tell you about which framework you should use forevermore. The aim is to give you some understanding of the decision-making process that I use to pick a framework.

I think there are two philosophies when it comes to Javascript. One approach is to do everything in the frontend, the other to only use JavaScript to enhance the page. Tools like JQuery are good for enhancing a page. Frameworks like ReactJS are good for building a complete application within the browser. This split of interests is one of the main decision influencers that you can use to evaluate which framework to use.

Angular

Angular 2, released last year is a great framework that is worth considering. With the 5G network coming out in the next few years, running a fast application from mobile is becoming less of an issue. Eventually, technology will be able to transfer data using the same speed to devices to all devices, however, until that happens speed matters. A single-page app (SPA) was originally designed as a way to combat the slowness of data to mobile devices. Angular was built with that in mind which means it is good for building an application within a browser.

The AngularJS framework footprint is pretty big, however, the benefit of this big bundle size is that it does a lot of things for you. Angular deals with routing and all kinds of things that you may, or, may not want. If your website uses Episerver, it is very unlikely that you will build a single–page app from scratch. On most projects that I have worked on, all we really needed was something that will do the model-biding to the API layer in an easy and efficient manner.

Currently, Angular 2 has not had the adoption that AngularJs 1 did, which leaves it in a state of flux at the minute. Angular is also pretty intrusive.. so when you work with Angular you are stuck with i. You can not easily swap out AngularJs later on. There's a steeper learning curve to AngularJs compared to some of the other frameworks like JQuery. This is especially true if you do not need to use many of out-of-the-box features.

Knockout.js

Knockout is probably the most .NET centric Javascript framework. Knockout is meant to be an easier framework for people coming from a .NET background that want to start using JavaScript. I think Knockout is written with the aim most of the logic happens in an API. With KnockoutJS you can talk to those APIS, which is why people that tend to use .NET tend to like Knockout because you worry more about your dot net code than your JavaScript code This is the framework my friend uses in most of his projects, so he obviously likes it. He has based his whole a business on it., he likes it that much! Knockout will provide the model binding we need.

The really nice thing about KnockoutJS is the automatic binding. Automatic binding prevents the need for vanilla JS event listeners. Knockout can be thought of as a lightweight version angular. THe bundle size is smaller and lets you work in an HTML manner just less intrusively. KnockoutJS, like AngularJS, is still in active development

Backbone.js

BackboneJS is thought of as a complete framework, however, the downside is that there is no more active development on BackboneJS. For me this rules Backbone out as an option. With any new changes in tech, like HTTPS2, you would need to extend the framework yourself. I think it is better to use a framework that will evolve with you, not against you!

React.js

Created by Facebook, ReactJS is all about single-page applications. React will allow you to completely build your frontend website all in JavaScript. No HTML files or Razor views are required! ReactJs is the most popular JavaScript framework nowadays. ReactJs, like AngularJS, will turn your application into a ReactJS solution. If you want to use Episerver as a headless CMS I would say ReactJs is the best choice. If you want to go in this direction though you will have an issue. At the time of writing, there is no Episerver JavaScript client-side library, there is no sample site you can use as a starting point, you will be left on your own! Sadly this path will involve rewriting a lot of the API yourself. Until Episerver provides better support, I would avoid using ReactJS!

If you have limited JS skills and you have a team of .NET developers, then Knockout.js might be more suited for your project. If you have a more HTML focused team and you want to go headless, ReactJS or AngularJS is a good option. The thing to note is that some frameworks like ReactJS and AngularJS are more intrusive. If you use AngulaJS your application will become an angular application, where something like BackboneJS, or KnockoutJS allows you to work with Razor views by enhancing the HTML instead. Happy Coding 🤘