SharePoint Framework: Developer and Scaffolding Tools

SharePoint Framework leverages commonly used developer tools and it does not dictate which JavaScript framework should be used to build the solutions. In the past, development of solutions was reserved to Visual Studio on Windows and developers primarily used C#. Communicating with SharePoint was done using SharePoint’s server API, or most recently, CSOM, JSOM or REST. The shift from a proprietary model requiring a significant amount of knowledge to a flexible and highly customizable framework was driven by huge customer demand for the need to customize SharePoint on-prem, online and in the Cloud. In addition, traditional farm based solution is incompatible with cloud based tools and technology. In order to continue moving forward with cloud based applications, a major change had to take place.

SharePoint Framework is highly customizable as it is entirely based on open source JavaScript. Its framework was developed in React as Microsoft chose to develop Delve and the new document library in React. Design and build is executed in the superset of JavaScript – TypeScript. TypeScript is then transpiled into JavaScript making development work more routine-based thus reducing coding errors. Though it is not mandatory that developers use TypeScript, though the investment of learning it will pay off in the long run, it should be noted that it is highly recommended that development of solutions should be done with TypeScript to ensure that customized solutions will be mobile friendly and looking great across all platforms during build and final release.

SharePoint Framework allows you to extend your existing tools and solutions while taking full advantage of exciting open source tools such as Yeoman, Gulp, Workbench, Node.js, GitHub and Angular while still maintaining the option to use Visual Studio, Visual Studio Code and Visual Studio Team Services.

Many open source tools have been available in the open source community for a number of years, but these tools are "new" in SharePoint Framework. Most notably are three products that are an integral part of SharePoint Framework and they each support the framework in the following capacities:

Yeoman is the scaffolding tool for web applications. With Yeoman, developers can create project structures that facilitate the use of custom functionality. This in turn allows developers to work faster.

Gulp makes development efficient through the leveraging of a wide variety of plug-ins to perform repetitive development tasks, automate minification and perform compression.

Workbench allows the developer to test new web parts and apps before migrating them to production environments by replicating SharePoint as a local and offline environment.

SharePoint Page Experience

As a core component, the modern SharePoint Page has a notably developer friendly page structure. Pages can be constructed by using any client-side JavaScript templating framework and can be technologically independent. This page structure provides the ability to host web parts, add-ins and new opportunities.

The framework provides a page layout that is responsive and mobile-ready. Each page has a "Chrome" structure that surrounds the page body. This section contains the out of the box logic supplied by Microsoft plus additional developer logic that has been built on top of it. Simply put, it contains your business context. This Chrome layer manages the presentation of the page so that it displays appropriately on the device whether it be desktop, tablet or smartphone.

The Page Body becomes the canvas where web parts, apps, files, Delve components and other elements can be placed and arranged according to business needs. By layering this on top of the Chrome layer, there is no need to worry about proper display presentation on different devices. The Page Body is where the developer mostly lives, interacting with anything that has been built and placed here. The developer, regardless of skill level, is able to customize SharePoint pages by adding any build that has been placed on the canvas by clicking on a plus sign, selecting and placing the components.

Through this process, developers will be able to extend the capabilities of SharePoint more efficiently, reliably and quickly, and best of all, if you follow the rules, it will be mobile ready and responsive right from the start.

As SharePoint Framework has not yet been released, the question of how do we prepare for it begs to be asked. Stay tuned as I answer this question in the second installment of The New SharePoint Framework: Prepare Yourself!