This document contains a summary of a presentation on modern SharePoint sites. It discusses key differences between classic and modern sites, challenges with customizing modern sites, and how to get started with modern SharePoint development using tools like SharePoint Framework (SPFx) and Yeoman. It provides links to resources on setting up a development environment, planning hub sites, and building web parts with Angular and React. The presenter encourages attendees to check his blog for additional information on modern SharePoint and code examples.

1. Peter Ward #Amazing #O365 #Beautiful
SharePoint Saturday New York July 27th 2019

2. {
background : “Founder/CTO ",
employee : “SoHo Dragon",
skill : “SharePoint, O365",
books : “Co author of 4 SharePoint books”
writing : “Write for Forbes magazine”
Co organizer : “SharePoint Saturday New York, Meetup”
location : “New York”
old school : “Like projects on time and on budget”
hobbies : “Yoga, cooking vegetarian food",
}

3. {
Approach
}

4. {
Introductions
}

5. {
You do not need to write
anything down. Everything, is
on my blog.
www.wardpeter.com
}

6. REPEAT
SLIDE{
You do not need to write
anything down. Everything, is
on my blog.
www.wardpeter.com
}

7.  It’s not responsive
 Branding … is a science project and $$$$
 Make page editing easier.. More user friendly
 It’s Microsoft’s attempt to get users to use SharePoint as SharePoint
 Out of the box features that are really useful

8.  Classic UI isn’t going away any time soon….. Like in the next 18 months
 It isn’t always faster on page loads.... If you use React (Fabric UI)
 Both Classic and Modern can co exist
 Modern UI is not easily customizable for branding
 Need know modern command line development- Tooling
 No page layout
 Less templates . No record center
 You cannot add snippets of code into modern sites from the UI itself –OOB
 Search results page- isn’t easy to be customized .. As of date of the ppt.
 The template approach is different with site design (not as good)

9. 10
 Will need to you PnP provisioning engine or SPFx web parts
 Angular JS- MS doesn’t support Angular scaffolding template
 Behind the scenes : modern pages are React
 SPFX web parts. The code is run separately, so over riding
doesn’t happen
 Now need to application customizer- this put angular main files into the
masterpage
 SP Go
 Tool Tip: Can use the modern script editor web part (Github)

10. 9
These developed applications can be deployed as
Azure hosted apps or azure API management and
SPFx web parts
And use Graph API’s, Azure AD, ETC . SP API –
can be little restrictive

11. 8
 The Explorer view doesn’t exist anymore

12. 7
 Branding is not easy to change out of the box, only a few themes and patterns
available that you can switch between.... (SharePoint actually looks like a decent
intranet site)
 Since masterpages don’t exist, you cannot customize look and feel. Say goodbye to
you completely customized look. USE SPFx extensions, by injecting custom JS
 https://marketplace.visualstudio.com/items?itemName=SiteGo.spgo - Work
directly on your site
 Personalized user branding - https://www.microsoft.com/en-us/microsoft-
365/blog/2019/05/21/sharepoint-home-sites-microsoft-365-innovations-intelligent-
workplace/

13. 6
 Integration to other O365 components Groups, Teams, Planner
 Modern site has a notebook, calendar- integrate into Outlook calendars in
Outlook, or all your notes in OneNote, across all sites and your own personal use.
 This also comes with the downside of maintain all of these individually

14. 5
Are modern sites different than modern UI??
Not really. Modern UI is a way of Microsoft to convert the
existing classic site's contents to a modern experience. The
sites may still be classic, but the site contents will have a
modern UI, with an option to go back to classic UI.
Modern sites on the other hand will have a modern UI by
default and will not have an option to switch to
classic
Ribbon Goes away

15. 4
Since the modern UI is completely responsive, it
behaves very well on mobile devices
Beware: if you are using the 3rd party script editor web
part, avoid jQuery/ Angular 1.x /JavaScript containing
HTML as it may interfere with responsive design.
EG Reality

16. 3
 Microsoft Teams and Groups provision modern SharePoint sites by default. All
modern

17. 2
 Easier navigation with modern- Modern sites use a concept called "hubs" where
sites are more loosely connected. The product site can just be switched from the
Division A to the Division B hub, and it will get the navigation, search, and look of
a Division B site. Its URL won't even change, so favorites and links won't break.
 Only issue with the hub site though is that each hub site is a site collection. You
can't have them as subsites
 Modern sites take away the ability to control the number of templates available
to create subsites.
 Demo- Converting a site to a Hub site.

18. 1
 The modern look and feel inside lists and libraries have Flow and PowerApps
integration
 View formatting on modern lists and libraries enables you to give a cleaner look to
the contents
 You can copy and move items- Modern sites give you the flexibility to copy
files/pages to different locations so that you don’t need to download and upload
them at a different location

19. https://channel9.msdn.com/

20.  https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
 App Catalog - This is where your code will be
 Modern SharePoint Book
 See Code giveaway
 https://yeoman.io/ - build the scaffolding for SPfx web part and extension
Install a code editor
You can use any code editor or IDE that supports client-side development to
build your web part, such as:
Visual Studio Code
Atom
Webstorm

21.  Page load time – Chrome Extension
 Save to Pocket – Great reference
 9 Chrome extensions that every SharePoint Developer should use
 Postman
 SPEditor
 JSON Viewer
 Sonar
 Angularjs – inspector
 IE Tab
 Clear Cache -
 Multiple identities

22.  spfx-announcements
 Slider
 News ticker
 Animated Text
 3D Carousel

24. {
Where to start with modern
Code
How to get started
QA
Code example giveaways – links
}

25. QUESTIONS
{
t - @HelloPeterNYC
b - www.wardpeter.com
w - www.sohodragon.nyc
}

26.  Set up your SharePoint Framework development environment
 https://developer.microsoft.com/en-us/office/blogs/update-on-modern-document-libraries-and-
extensiblity/
 Planning your SharePoint hub sites
 Tooling up SPfX
 What is https://wardpeter.com/what-is-angular/
 https://wardpeter.com/so-you-want-to-do-a-bit-of-modern-ui/
 Using React and Redux in SharePoint Framework (SPFx)