SlideShare a Scribd company logo
1 of 30
Mark Rackley
Solutions Architect
Developer
Blogger
Speaker
Conference Organizer
Podcaster
InfoPath Hater
Bacon Lover
mrackley@paitgroup.com
@mrackley
www.paitgroup.com
www.techsplaining.net
www.collabsummit.org
www.stratusforms.com
www.markrackley.net
WHAT’S UP WITH THIS SESSION?
WHAT’S UP WITH THIS SESSION?
Have existing jQuery/JavaScript solutions
Need to better understand the SharePoint Framework
Don’t know or don’t want to learn TypeScript
Don’t know or don’t want to learn React
Need to know how to get started
FOR CLIENT SIDE DEVELOPERS THAT…
Goals for the Session
What is the
SharePoint
Framework?
Why do we
need the
SharePoint
Framework?
Converting a
Customization
to the
SharePoint
Framework
WHAT IS THE SHAREPOINT FRAMEWORK
(SPFx)
SharePoint framework
LOB Systems and Cloud Services
Microsoft Graph
(coming soon)
Modern client-side development
Lightweight web and mobile
Used to build Modern SharePoint
Page
Backward compatible
Supports open source tools
and JavaScript web frameworks
THE SHAREPOINT FRAMEWORK
Finally! A management and deployment story for our client side web parts
Works in Classic and Modern Pages
Users can set properties instead of having to modify script
Local Workbench for development and debugging
TypeScript (if you are a .NET Dev)
You GET to learn new (marketable) skills
Mobile friendly
Works the same in On Premises and Online
GOOD
THE SHAREPOINT FRAMEWORK
The process can initially be daunting if you are a .NET developer (Change is hard)
TypeScript (If you are JavaScript developer)
Limited Visual Studio Tooling
There is no store
You HAVE to learn new skills
WHAT HURDLES WILL YOU FACE?
JavaScript/HTML/CSS
An open mind (it’s a brave new world)
Node.js, NPM, Yeoman, Gulp??? (open
source FTW!)
TypeScript (Enterprise JavaScript
Development)
Office UI Fabric (Front-end visual
Framework)
VisualStudio Code
SKILLS YOU NEED TO
EMBRACE
WHY DO YOU NEED THE SHAREPOINT
FRAMEWORK
Stop polluting the global namespace
Better for the mobile application
Prevents non-devs from potential
security risks of putting unknown
scripts on page
STOP SCRIPT INJECTION
WHY DO YOU NEED THE SHAREPOINT
FRAMEWORK
WHY DO YOU NEED THE SHAREPOINT
FRAMEWORK
Stop polluting the global namespace
Better for the mobile framework
Prevents non-devs from potential
security risks of putting unknown
scripts on page
STOP SCRIPT INJECTION
Create manageable projects for multiple
devs
Deploy solutions easily to multiple sites or
pages
Use properties and keep users out of
scripts
ENTERPRISE READY
DEMO: A Customization
without the SharePoint
Framework
DEMO: Converting a
Customization to the
SharePoint Framework
A couple of other
potential hurdles
• Install Instructions:
• https://github.com/SharePoint/sp-dev-docs
• Online Courses:
• https://www.voitanos.io/
• (Use Code “Rackley” for 10% off)
• Prolific blog posts:
• https://blog.mastykarz.nl/
• Source Code for this session
https://github.com/mrackley/SPFXConvert

More Related Content

What's hot

The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).Michael Brooks
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal languageRonald Harmsen
 
HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs SilverlightMark Allan
 
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsVicente Gerardo Guzman Lucio
 
How to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutesHow to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutesRobert MacLean
 
WordPress: Doing Simply & Effectively
WordPress: Doing Simply & EffectivelyWordPress: Doing Simply & Effectively
WordPress: Doing Simply & Effectivelyarryaas
 
The Future of-the CMS (Twin Cities DrupalCamp 2015)
The Future of-the CMS (Twin Cities DrupalCamp 2015)The Future of-the CMS (Twin Cities DrupalCamp 2015)
The Future of-the CMS (Twin Cities DrupalCamp 2015)Todd Ross Nienkerk
 
AngularJS: A framework to make your life easier
AngularJS: A framework to make your life easierAngularJS: A framework to make your life easier
AngularJS: A framework to make your life easierWilson Mendes
 
DotNetCampus - Analizzare le performance di un'applicazione asp.net con Glimpse
DotNetCampus - Analizzare le performance di un'applicazione asp.net con GlimpseDotNetCampus - Analizzare le performance di un'applicazione asp.net con Glimpse
DotNetCampus - Analizzare le performance di un'applicazione asp.net con GlimpseEmanuele Bartolesi
 
FPC-Virtual Business
FPC-Virtual BusinessFPC-Virtual Business
FPC-Virtual BusinessMike Pugh
 
Beyond responsive design - UI for the modern web application
Beyond responsive design - UI for the modern web applicationBeyond responsive design - UI for the modern web application
Beyond responsive design - UI for the modern web applicationPete Smith
 
Website development & it's trends
Website development & it's trendsWebsite development & it's trends
Website development & it's trendsSunCart Store
 
Turku <3 Frontend - Progressive Web Apps, Web and Apps
Turku <3 Frontend - Progressive Web Apps, Web and AppsTurku <3 Frontend - Progressive Web Apps, Web and Apps
Turku <3 Frontend - Progressive Web Apps, Web and AppsJoni Juup
 
Analizzare le performance di un'applicazione ASP.NET con Glimpse
Analizzare le performance di un'applicazione ASP.NET con GlimpseAnalizzare le performance di un'applicazione ASP.NET con Glimpse
Analizzare le performance di un'applicazione ASP.NET con GlimpseEmanuele Bartolesi
 
GlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgGlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgMarko Heijnen
 
React Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive servicesReact Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive servicesFabio Biondi
 
Branching Your Way to Low-Code Perfection
Branching Your Way to Low-Code PerfectionBranching Your Way to Low-Code Perfection
Branching Your Way to Low-Code PerfectionOutSystems
 
Strapi Meetup whitepaper
Strapi Meetup whitepaperStrapi Meetup whitepaper
Strapi Meetup whitepaperStrapi
 

What's hot (20)

The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).The JAMStack (Javascript, APIs, Markup).
The JAMStack (Javascript, APIs, Markup).
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal language
 
HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs Silverlight
 
JavaScript Toolkit
JavaScript ToolkitJavaScript Toolkit
JavaScript Toolkit
 
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
 
How to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutesHow to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutes
 
WordPress: Doing Simply & Effectively
WordPress: Doing Simply & EffectivelyWordPress: Doing Simply & Effectively
WordPress: Doing Simply & Effectively
 
The Future of-the CMS (Twin Cities DrupalCamp 2015)
The Future of-the CMS (Twin Cities DrupalCamp 2015)The Future of-the CMS (Twin Cities DrupalCamp 2015)
The Future of-the CMS (Twin Cities DrupalCamp 2015)
 
AngularJS: A framework to make your life easier
AngularJS: A framework to make your life easierAngularJS: A framework to make your life easier
AngularJS: A framework to make your life easier
 
DotNetCampus - Analizzare le performance di un'applicazione asp.net con Glimpse
DotNetCampus - Analizzare le performance di un'applicazione asp.net con GlimpseDotNetCampus - Analizzare le performance di un'applicazione asp.net con Glimpse
DotNetCampus - Analizzare le performance di un'applicazione asp.net con Glimpse
 
FPC-Virtual Business
FPC-Virtual BusinessFPC-Virtual Business
FPC-Virtual Business
 
Beyond responsive design - UI for the modern web application
Beyond responsive design - UI for the modern web applicationBeyond responsive design - UI for the modern web application
Beyond responsive design - UI for the modern web application
 
Website development & it's trends
Website development & it's trendsWebsite development & it's trends
Website development & it's trends
 
Turku <3 Frontend - Progressive Web Apps, Web and Apps
Turku <3 Frontend - Progressive Web Apps, Web and AppsTurku <3 Frontend - Progressive Web Apps, Web and Apps
Turku <3 Frontend - Progressive Web Apps, Web and Apps
 
Analizzare le performance di un'applicazione ASP.NET con Glimpse
Analizzare le performance di un'applicazione ASP.NET con GlimpseAnalizzare le performance di un'applicazione ASP.NET con Glimpse
Analizzare le performance di un'applicazione ASP.NET con Glimpse
 
GlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgGlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.org
 
React Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive servicesReact Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive services
 
Branching Your Way to Low-Code Perfection
Branching Your Way to Low-Code PerfectionBranching Your Way to Low-Code Perfection
Branching Your Way to Low-Code Perfection
 
Blazor v1.1
Blazor v1.1Blazor v1.1
Blazor v1.1
 
Strapi Meetup whitepaper
Strapi Meetup whitepaperStrapi Meetup whitepaper
Strapi Meetup whitepaper
 

Similar to SharePoint Conference North America - Converting your JavaScript to SPFX

Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanAdam Boczek
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hourConvert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hourBrian Culver
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) Sascha Sambale
 
Building Rich Applications with Appcelerator
Building Rich Applications with AppceleratorBuilding Rich Applications with Appcelerator
Building Rich Applications with AppceleratorMatt Raible
 
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. Kushan Lahiru Perera
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesReal World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesBrian Culver
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
NET Event - Migrating WinForm
NET Event - Migrating WinFormNET Event - Migrating WinForm
NET Event - Migrating WinFormRaffaele Garofalo
 
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SKHTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SKDavid Wesst
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1Jacek Tomaszewski
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guidesamir azazy
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteChristian Heilmann
 
A Developer Day 2014 - Durban
A Developer Day 2014 - Durban A Developer Day 2014 - Durban
A Developer Day 2014 - Durban Robert MacLean
 
Top 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentTop 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentAjeet Singh
 
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraHow to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraCareervira
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekDr. Felix Raab
 
Stream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentationStream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentationstreambase
 

Similar to SharePoint Conference North America - Converting your JavaScript to SPFX (20)

Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin German
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hourConvert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hour
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
 
Building Rich Applications with Appcelerator
Building Rich Applications with AppceleratorBuilding Rich Applications with Appcelerator
Building Rich Applications with Appcelerator
 
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure ServicesReal World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure Services
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
NET Event - Migrating WinForm
NET Event - Migrating WinFormNET Event - Migrating WinForm
NET Event - Migrating WinForm
 
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SKHTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guide
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
A Developer Day 2014 - Durban
A Developer Day 2014 - Durban A Developer Day 2014 - Durban
A Developer Day 2014 - Durban
 
Top 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentTop 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App Development
 
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraHow to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one week
 
Stream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentationStream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentation
 

More from Mark Rackley

Column Formatter in SharePoint Online
Column Formatter in SharePoint OnlineColumn Formatter in SharePoint Online
Column Formatter in SharePoint OnlineMark Rackley
 
A Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePointA Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePointMark Rackley
 
Utilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done FasterUtilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done FasterMark Rackley
 
Citizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePointCitizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePointMark Rackley
 
A Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePointA Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePointMark Rackley
 
A Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointA Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointMark Rackley
 
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...Mark Rackley
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathIntroduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathMark Rackley
 
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint LimitationsSPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint LimitationsMark Rackley
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointSPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointMark Rackley
 
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesTulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesMark Rackley
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQueryMark Rackley
 
SPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery LibrariesSPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery LibrariesMark Rackley
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideMark Rackley
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointMark Rackley
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityUsing jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityMark Rackley
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014Mark Rackley
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOMMark Rackley
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopMark Rackley
 

More from Mark Rackley (20)

Column Formatter in SharePoint Online
Column Formatter in SharePoint OnlineColumn Formatter in SharePoint Online
Column Formatter in SharePoint Online
 
A Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePointA Power User's Introduction to jQuery Awesomeness in SharePoint
A Power User's Introduction to jQuery Awesomeness in SharePoint
 
Utilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done FasterUtilizing jQuery in SharePoint: Get More Done Faster
Utilizing jQuery in SharePoint: Get More Done Faster
 
Citizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePointCitizen Developers Intro to jQuery Customizations in SharePoint
Citizen Developers Intro to jQuery Customizations in SharePoint
 
A Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePointA Power User's intro to jQuery awesomeness in SharePoint
A Power User's intro to jQuery awesomeness in SharePoint
 
A Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointA Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePoint
 
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathIntroduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPath
 
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint LimitationsSPTechCon Boston 2015 - Overcoming SharePoint Limitations
SPTechCon Boston 2015 - Overcoming SharePoint Limitations
 
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePointSPTechCon Boston 2015 - Utilizing jQuery in SharePoint
SPTechCon Boston 2015 - Utilizing jQuery in SharePoint
 
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesTulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
 
SPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuerySPTechCon DevDays - SharePoint & jQuery
SPTechCon DevDays - SharePoint & jQuery
 
SPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery LibrariesSPTechCon Dev Days - Third Party jQuery Libraries
SPTechCon Dev Days - Third Party jQuery Libraries
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePointSPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
 
Using jQuery to Maximize Form Usability
Using jQuery to Maximize Form UsabilityUsing jQuery to Maximize Form Usability
Using jQuery to Maximize Form Usability
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
 

Recently uploaded

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 

Recently uploaded (20)

Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

SharePoint Conference North America - Converting your JavaScript to SPFX

  • 1.
  • 2.
  • 3. Mark Rackley Solutions Architect Developer Blogger Speaker Conference Organizer Podcaster InfoPath Hater Bacon Lover mrackley@paitgroup.com @mrackley www.paitgroup.com www.techsplaining.net www.collabsummit.org www.stratusforms.com www.markrackley.net
  • 4. WHAT’S UP WITH THIS SESSION?
  • 5. WHAT’S UP WITH THIS SESSION? Have existing jQuery/JavaScript solutions Need to better understand the SharePoint Framework Don’t know or don’t want to learn TypeScript Don’t know or don’t want to learn React Need to know how to get started FOR CLIENT SIDE DEVELOPERS THAT…
  • 6. Goals for the Session What is the SharePoint Framework? Why do we need the SharePoint Framework? Converting a Customization to the SharePoint Framework
  • 7. WHAT IS THE SHAREPOINT FRAMEWORK (SPFx) SharePoint framework LOB Systems and Cloud Services Microsoft Graph (coming soon) Modern client-side development Lightweight web and mobile Used to build Modern SharePoint Page Backward compatible Supports open source tools and JavaScript web frameworks
  • 8. THE SHAREPOINT FRAMEWORK Finally! A management and deployment story for our client side web parts Works in Classic and Modern Pages Users can set properties instead of having to modify script Local Workbench for development and debugging TypeScript (if you are a .NET Dev) You GET to learn new (marketable) skills Mobile friendly Works the same in On Premises and Online GOOD
  • 9. THE SHAREPOINT FRAMEWORK The process can initially be daunting if you are a .NET developer (Change is hard) TypeScript (If you are JavaScript developer) Limited Visual Studio Tooling There is no store You HAVE to learn new skills WHAT HURDLES WILL YOU FACE?
  • 10. JavaScript/HTML/CSS An open mind (it’s a brave new world) Node.js, NPM, Yeoman, Gulp??? (open source FTW!) TypeScript (Enterprise JavaScript Development) Office UI Fabric (Front-end visual Framework) VisualStudio Code SKILLS YOU NEED TO EMBRACE
  • 11. WHY DO YOU NEED THE SHAREPOINT FRAMEWORK
  • 12. Stop polluting the global namespace Better for the mobile application Prevents non-devs from potential security risks of putting unknown scripts on page STOP SCRIPT INJECTION WHY DO YOU NEED THE SHAREPOINT FRAMEWORK
  • 13. WHY DO YOU NEED THE SHAREPOINT FRAMEWORK Stop polluting the global namespace Better for the mobile framework Prevents non-devs from potential security risks of putting unknown scripts on page STOP SCRIPT INJECTION Create manageable projects for multiple devs Deploy solutions easily to multiple sites or pages Use properties and keep users out of scripts ENTERPRISE READY
  • 14. DEMO: A Customization without the SharePoint Framework
  • 15. DEMO: Converting a Customization to the SharePoint Framework
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. A couple of other potential hurdles
  • 27.
  • 28.
  • 29.
  • 30. • Install Instructions: • https://github.com/SharePoint/sp-dev-docs • Online Courses: • https://www.voitanos.io/ • (Use Code “Rackley” for 10% off) • Prolific blog posts: • https://blog.mastykarz.nl/ • Source Code for this session https://github.com/mrackley/SPFXConvert