SharePoint Framework offers new developer opportunities for extending SharePoint. But in order to benefit of these new opportunities, do you need to throw away everything you have built in the past and start all over or is there a way to leverage the previous investments?
It's a new model
Client-side SharePoint solutions
The idea of building SharePoint customizations using client-side technologies isn't new. For years we have been embedding scripts on pages using the Content Editor and Script Editor Web Part or injecting it through JSLink, script links and Custom Actions. And while things worked, we didn't have a formalized approach for integrating our client-side solutions with the SharePoint UI. At least not until recently.
With the announcement of the SharePoint Framework Microsoft offers us a new and formalized way of integrating customizations with SharePoint UX. Using the SharePoint Framework we will be able to extend SharePoint's capabilities beyond what is available out of the box using the latest client-side technologies and tools.
If you have been building client-side solutions for SharePoint in the past, chances are that you have used Angular. The great news for you is, that whatever you have built in the past, can be easily migrated to make use of the SharePoint Framework.
Migrating existing client-side applications to SharePoint Framework
The Todo Web Part that we used as an example consists of a single template and controller, a data service which communicates with SharePoint using its REST API and a few settings configured using Angular constants. The UI is styled using the Office UI Fabric and to simplify the implementation in Angular it uses ngOfficeUIFabric. The complete source code of this Web Part is available on GitHub at https://github.com/waldekmastykarz/demo-sharepoint-todo-angular.
We divided the migration process in two steps where first we migrated the existing Web Part as-is to the SharePoint Framework. Next, we extended it to use the Web Part API and to be configurable through the Web Part Property Pane.