Introductory slide set on the new client side framework on SharePoint platform which introduces by Microsoft. This slide-deck has been used by me in the local user group speak-up had in the year 2016. @kushanlahiru

1. The future of SharePoint/ O365 developer ecosystem
Kushan Lahiru Perera
PgD(UGC), PGD(UK), MCP, CCNA

2. kushanlahiru.wordpress.com
@kushanlahiru
kushanlahiru@live.com
Kushan Lahiru Perera
Full stack developer
Works for VirtusaPolaris
Post Graduate Diploma holder

3.  Introduction to SharePoint Framework
 Get introduced SharePoint Framework developer
ecosystem
 Develop with SharePoint Framework
 Deploying SharePoint Framework Solutions
Line up

4. Office Blog
blogs.office.com

5. SharePoint Farm
Solutions
Sandbox
Solutions
SharePoint
apps/add-ins
• Server-side object model
• Declarative code
• HTTP Handlers
• Runs on SharePoint
• CSOM/ REST
• Also runs in cloud
• Runs separately from SharePoint
SharePoint
Framework

6. “A Page and Part model that
enables fully supported client-
side development, easy
integration with the Microsoft
Graph and support for open
source tooling” – office.com
 Higher user experience with consistency
 Responsive and Mobile ready
 SharePoint Online
 OneDrive
 Same look & feel as Microsoft built(UI
Fabric)

7. Deep customization is highly
capable. Since more tooling and
libraries can be used
Enabled for both cloud (O365) &
on premise
Allow developers to dive towards
other web technologies and gain
the potential of those…such as
AngularJS, EmberJS, React and
etc.

8.  Better user experience (UI & UX)
 Decoupled systems with REST (Cleaner contact points)
 Evolution of SaaS solutions and O365
 Client-side scripting

9.  JS and performance
 Extensions and extended tooling
 Responsive interfaces for all browsers(web, tab, mobile..)
 User focused app development (User Centered Design- UCD)

10. Now, with the SharePoint Framework, we have a structured
approach to modern app development, end-to-end, that’s not
dependent on .NET
“This means SharePoint evolving
to extensibility”

11. Despite the different forms of add-ins the model
has some limitations, one of which is the use of
iframes for integrating add-ins on pages.
Its another tool for your toolbox, its up to you to
pick the best for your job
Modern team sites look great and offer improved
user experience in the mobile-first world

12. Responsive mobile friendly
No iframe
Dynamic properties
List-based and Page-based
No need for cross-domain library to access
SharePoint resources

13. 1. Infrastructure
No isolated app domain. No changes in DNS or setting up high-
trust.
2. Responsive
Web parts are not made as iframes and thereby can be made as
responsive and mobile friendly
3. Dynamic properties
Properties in SharePoint add-ins are defined decoratively in
XML. They can't be changed in runtime.

15. Tooling Frameworks

16. model provides dramatically better experiences,
performance, mobile support and more while
broadening our developer ecosystem from .NET and
beyond
– extended capabilities from .NET developer ecosystem
Uses JS frameworks like Angular and React

17. SharePoint Framework will be available to
existing SharePoint sites
You will be able to host client-side web parts
developed with the new SharePoint
Framework on existing SharePoint pages

21. New>Project>Project Template

22. You are free to
use your
favorite
• Sublime - https://www.sublimetext.com
• Windows – PowerShell/ cmder - http://cmder.net
• Mac – oh my zsh - http://ohmyz.sh

23. Is develop time hosting platform
Cross-platform
Open source
Local JS runtime environment
Same as IIS express in typical
Microsoft dev stack
Also capable of working with server
side code
https://nodejs.org/

24. Package manager for JavaScript
Used to consume 3rd party libraries
Equivalent for nuget package
manager
Node package manager
https://www.npmjs.com

25. Scaffolding tool for development
(template engine)
Runs on top of Node.js
Can be used “npm” to install
Yeoman is responsible for creating the
project structure with all the files and
folders, just as Visual Studio does, but
using the console instead.
Template Repo
http://yeoman.io/

26. Provide automation for your
build tasks
Classically this has done by
 Microsoft Build/ Maven/ Ant
Test Automation
Task and build manager
http://gulpjs.com/

27. open-source language created and
maintained by Microsoft
super set of JavaScript that extends
the language
Can code both client-side and server-
side
All concepts same as C#
Typed JS
typescriptlang.org

28. Its your flavor!!
Light weight
frameworks
Fully fledged frameworks
https://facebook.github.io/react/
https://angularjs.org/
http://emberjs.com/

29.  The page structure will allow developers and enthusiasts of all skill levels to
extend SharePoint capabilities
 more efficiently
 reliability
 faster than ever
 mobile ready
 responsive from day one

30. gulp upload-cdn
manual upload of the app

31. Local development time experience
Test your changes immediately even in offline mode
No need to deploy and see
Increases dev productivity
Reduced development cost

32. You can deploy this to where you want. It may be;
CDN
Azure Web App
(If you have subscriptions)
SharePoint Library
(If you addicted to this)

33. .js file in
Style Library
.js file in the
Scripts folder
.js file
on CDN

34.  Client web parts and client-side applications are the new
building blocks.
 these go along with the new page model.
 It’s a JavaScript world!
 Config files are in JSON
 Code is implemented in JavaScript on the client-side.
 The packaging of artifacts is different!
 There are new manifest files to learn about (e.g. a web part
manifest)
 Other files such as bundle.json, package-solution.json, upload-
cdn.json and more.
 Gulp tasks are used for packaging.
 Files for your web part or app can live anywhere
Anywhere that can be accessed on a URL by the end-user
basically.
 The “local development” model is very different –
 Gulp and node.js are used to host files locally, so you don’t
need to use IIS on your local machine.
All you need
to know about
SharePoint Framework

35.  No particular JavaScript framework is mandated – You
are free!!
 But if you are used React in the past continue with that
since less load and libraries on the page
 You should consider learning TypeScript
 At least the key parts such as modules, the type system and
so on.
 You no longer NEED to stick for Visual Studio
 Other lightweight code editors such as Visual Studio Code
or Sublime…or etc.
 SharePoint Webhooks – these are the new “event
receivers”
 Standardized to work with both On-prem and Online
All you need
to know about
SharePoint Framework

36.  The App Catalog is used as a packaging and
registration method
 Both client web parts and client-side applications are
packaged in this way (moving away from the web part
gallery we’re used to do)
 Page security needs some consideration
 Because all magic are done in the clients browser
 Since that server side validators & restrictions need to be
highly considered
All you need
to know about
SharePoint Framework

37.  Node.js and npm - www.nodejs.org
 Gulp – www.gulpjs.com
 TypeScript - https://www.typescriptlang.org
 Yeoman - www.yeoman.io
 Git - www.git-scm.com/
 Office UI Fabric - dev.office.com/fabric
 Webpack (Bundling of JS)- webpack.github.io
 React - facebook.github.io/react
 Angular - angularjs.org
 Knockout - knockoutjs.com
 Handlebars - handlebarsjs.com

38. kushanlahiru.wordpress.com
@kushanlahiru
about.me/KushanPerera

39. kushanlahiru.wordpress.com
@kushanlahiru
about.me/KushanPerera