The document discusses the transition to the SharePoint Framework (SPFx) for development and customization, emphasizing its integration with modern JavaScript technologies. It highlights the benefits of using open web technologies, which allow developers to enhance their skills and improve project contributions while providing tools for effective project management. The authors encourage developers, even those still on SharePoint 2013, to start learning and adapting to this new framework and its associated technologies.

1. The Future of
SharePoint
Development:
Embrace the Web
Stack and Start
Building

2. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.2
The future of SharePoint
development and
customization is the
SharePoint Framework.

3. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.3
The SharePoint Framework (SPFx)
Is a client-side based framework
Enables JavaScript (JS) customizations to work
on top of SharePoint Online
Will work with SharePoint Server on-premises
in a future update
Current state: developer preview

4. Why should I care?

5. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.5
It’s good for the ecosystem
Instead of learning Microsoft’s version of a technology that’s rapidly outdated, we can use
the latest and greatest in jQuery, Knockout, Angular, React—even mix and choose
technology based on our needs. SharePoint developers will learn skills that are useful
even outside of SharePoint.

6. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.6
It’s good for business
It is far easier to hire web developers and
have them contribute to a SharePoint
project quickly. Also, SharePoint
developers will gain modern web skills
that can be used elsewhere.

7. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.7
Customizations on top of the SharePoint
Framework are intended to run within the
mobile apps.
If we come to Microsoft for this ride and
develop the “new way,” we get the
experience across all mobile devices—free.
Wait, There's More!

8. The web stack works great with
SharePoint Online!

9. Microsoft is no longer dictating our toolset, but
embracing open web technologies and
wanting to support industry trends as first-class
supported customizations within SharePoint.

10. So what is a SharePoint
developer to do?

11. “We will have to step up our game,
but it’s a small price to pay,
compared to the past when we had
to hack around ancient, unloved,
SharePoint-specific technology.“
John Liu, MVP Office Server and Services

12. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.12
The Toolbox

13. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.13
New, Shiny Tools
The tools Microsoft adopted for the SPFx are best-of-breed tools from the
web world:
GitHub for distributed
open source
Gulp is a task runner
used to build, test and
deploy to SharePoint
Webpack for
project bundling
Yeoman for scaffolding
and creating project
generators

14. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.14
SharePoint Workbench
SharePoint Workbench, once officially released,
will enable us to run and test our controls and
applications within an offline environment so we can
work on our projects and run automated tests when
we’re not connected to SharePoint Online.

15. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.15
PnP JavaScript Core Library
The PnP JS Core library provides a new
wrapper around the modern REST API that
should help developers transition into client-
side development.

16. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.16
What If I'm Still on SharePoint 2013?
Fear not!
Although it wasn't officially blessed by Microsoft the way the
SharePoint Framework is, we will recommend a technology
stack that works right now on-premises with SharePoint 2013
and 2016.

17. You don't need to wait.
Start upskilling yourself and your
team and be ready for SPFx.

18. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.18
What Technologies Do I Start With?
What comes next are web technologies that align
well with the direction of the open web stack. The
tech stack described in the following slides works
really well, but it is just one of many more
technologies that will also work.

19. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.19
In the JavaScript world, Node is the runtime that lets us run
code without a browser.
Npm is like nuget for getting libraries and tools that we need
to run tools as well as libraries for the web application.

20. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.20
AngularJS helps us manage databinding, components
and composition. There are solid alternatives such as
Angular 2 and React, which may be the better option if
your team is new.

21. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.21
Gulp is a task runner we can use to build, test and
deploy to SharePoint (comparable to MSBuild).
In the modern web stack, tools are everywhere, and
you'll find yourself needing a way to script them together
so they run easily and consistently every time you run
them.

22. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.22
In the SharePoint Framework, Webpack will be one of
the pieces used to package our resources both to run
in a local development server, or for deployment to a
CDN to be used in SharePoint itself.
At its core, its unique philosophy is to utilize parallel
code splitting to load JavaScript quickly into the
browser.

23. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.23
Selected for its simplicity, VS Code doesn’t try to be a
fully Integrated Development Environment (IDE) with
complete SDKs and wizards. Instead, it is a good code
editor that understands files grouped in folders really
well.

24. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.24
Kendo UI by Progress
HTML5 and JavaScript framework Kendo UI provides
ready-to-use UI widgets ranging from must-haves, such
as data grids, calendars and drop-downs, to advanced
line-of-business UI components, such as schedulers,
charts and pivot grids.

25. "I have some first-hand experiences here [at a client]
customizing both UI-Bootstrap and ngOfficeUIFabric on
several client projects. Halfway through each project, I'm
thinking, maybe I should have just gone for a commercially
supported framework and not spend all this time making
controls work."
John Liu, MVP Office Server and Services

26. © 2016 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.26
Want More?
Learn how to build a practical SharePoint business
application using modern web technology. Download the free
whitepaper, Preparing your Toolbox for the SharePoint
Framework: Angular, Webpack and Kendo UI
Authors:
John Liu, MVP Office Server and Services
Bart Bouwhuis, SharePoint Consultant
Free download

27. “The new tools and web stack work well together,
but there is no pressure to have to learn everything
at once. We are learning and sharing our learnings.
We see new pieces and we try to figure out where
they fit. We hope you will take what we’ve learned
and run further with it and be successful.”
John Liu & Bart Bouwhuis, authors of Preparing your Toolbox for the
SharePoint Framework: Angular, Webpack and Kendo UI