Chris O'Brien - Introduction to the SharePoint Framework for developers

Jul 19, 2016Download as PPTX, PDF4 likes22,363 views

Describes the new SharePoint development framework, which uses Gulp, node.js, TypeScript, SASS and other modern web technologies. Covers client web parts, modern pages and the canvas, and how to surface your files on a CDN for optimum performance. This intro presentation helps you get started.

Chris O'Brien - Introduction to the SharePoint Framework for developers

www.sharepointnutsandbolts.com
@ChrisO_Brien
http://cob-sp.com/COBLinkedIn

Subtle shift to client side development
Beyond jQuery - developers seeking to use
latest tech
Still difficult
for devs new
to SharePoint

Modern pages
and client web
parts
Client side
applications
(list-based and
page-based)
A new
development
model
New
deployment
possibilities
We’ll focus on these aspects

Apps, but no IFrames!
Similar to recent Delve
blog pages
New page “canvas” –
no classic web part zones

Pure JavaScript
implementation
“Baked-in JS injection”
Simplified end-user
experience (e.g. web
part properties)

Classic pages Modern pages
Classic web parts Y N
Modern web parts Y Y
Modern web parts can work in:
But classic web parts can NOT work in
modern pages

Not just JavaScript, but TypeScript!
Use your preferred JS framework –
React, Angular, Knockout, jQuery,
or none
Gulp for build
Yeoman for startup
No need for Visual Studio!

Fundamentals
TypeScript is expected (at least, for now)
Client web parts

1. Variables and types
var foo: string var foo: UserProfile
var foo: any
2. Typings for libraries (e.g. jQuery, CSOM)
3. Import a module to use it

Folder Purpose
config Settings for
bundling/deployment
dist Run-time files for your app
lib Intermediate folder in build
system
node_modules JS dependencies
src Where you write code
typings TypeScript typings
cob-sp.com/SPX-Files

Refactor into
separate TypeScript
classes/use new
SpHttpClient class
Implement
promises (e.g. ES6)
for async methods
Create
class/interface to
represent a search
result
Final code – separate ‘Search’ utility class. GetResultsAsync returns promise with
my TS interface representing a search result (with URL, description & title
properties):

Your files can be hosted anywhere
App packages are the deployment vehicle
Ensure dependencies are bundled OR referenced

Build app in
release mode (--
ship)
Upload
resources to
CDN
Upload app
package (.sppkg)
to app catalog
Add to page

1. Upload
resources to CDN
• Use supplied
Gulp task
(“upload-cdn”),
or do it yourself
2. Deal with
dependencies
• Ensure 3rd party
libraries are
bundled OR
referenced
externally
3. Package app
• Use supplied
Gulp task (“gulp
package-
solution”)
4. Add to app
catalog
• Administrator
drags and
drops into
catalog
5. Add to page
• Web part can
now be added
to page

Good news!
Likely to be released in a Feature
Pack update, some time in 2017

There isn’t one!
client-side
Provider-hosted add-ins/IFrames are still a good
choice
Create a server-side component (e.g. WebAPI) where
necessary

SharePoint dev is changing!
SPFx does not replace anything
Start your dev prep now!

The document provides an in-depth analysis of the SharePoint Framework developer preview. It describes the new SharePoint components, including ClientSideWebPart, modern page experiences, and webhooks. It also outlines the tooling used to build components, such as Yeoman templates, NPM modules, and Webpack. Finally, it discusses the client-side frameworks that can be used like React and Redux, and how existing approaches to client-side development can be complemented but not replaced by the SharePoint Framework.

Chris OBrien - Weaving Enterprise Solutions into Office ProductsChris O'Brien

Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 appsChris O'Brien

A presentation I gave at SharePoint Evolutions 2015. Here, I compare SharePoint apps (now renamed "SharePoint Add-Ins" as of April 2015!) and the newer flavour of app development, Office 365 apps. It focuses primarily on the perspective of a development team implementing the app - and factors to consider when deciding between the two approaches. However, to do this we must consider end-user and administration aspects, as well as code/development. Key agenda points: - Changes in SharePoint development - Apps, 2 years on.. - SharePoint Add-Ins – a recap - Office 365 apps - Why did Microsoft introduce these? What do they promise? - Comparing SharePoint Add-Ins with Office 365 apps - For the end-user, administrator and developer - Summary

Modern SharePoint, the Good, the Bad, and the UglyBob German

Bob German is a Principal Architect at BlueMetal who leads Office 365 and SharePoint development. In his presentation, he discusses Microsoft's modernization of the SharePoint user experience to be more mobile-friendly. This includes modern document libraries, lists, and team sites. He demonstrates the modern experiences and notes both improvements like a better mobile and editing experience, as well as limitations like missing web parts and limited customization options. He also discusses how administrators can control the modern experiences at the tenant, site collection, and list level.

SharePoint Framework, React and Office UI SPS Paris 2016 - d01Sonja Madsen

Do's and don'ts for Office 365 developmentChris O'Brien

A session I gave at the European SharePoint Conference 2015. Abstract: The "rules" of SharePoint development have changed - although MSDN documentation often lags behind, the Office 365 Product Group tell us we're no longer supposed to use custom master pages, WebTemplates or deploy our fields and content types in XML. This means core concepts and guidelines that have been around for 7 or 8 years no longer hold true! Clearly this is a massive change - but do we always need to adhere to these new rules? Or are there times when it's OK to use less-preferred (but still supported) approaches? In this session we look at the reasons behind Microsoft's change of position, and the associated thinking you need to do in the real world. In this session you will learn: 1. A discussion of the key changes in developer guidance 2. A technical deep-dive (with demos) into the new approaches Microsoft recommend 3. Consideration of the circumstances where you might choose NOT to adhere to the guidance, and why

Get started with building native mobile apps interacting with SharePointYaroslav Pentsarskyy [MVP]

ECS19 - John White - Unlock SharePoint’s Reporting SecretsEuropean Collaboration Summit

This document discusses various ways to generate reports from SharePoint data, including using SQL Server Reporting Services, Power BI, and Power Query to connect to and report on SharePoint lists and libraries. It covers techniques for handling complex SharePoint field types like lookups, metadata, and rich text. Reporting options for SharePoint Online, on-premises, and hybrid environments are also compared.

ECS19 Bert Jansen - Modernizing your existing sitesEuropean Collaboration Summit

This document discusses modernizing classic SharePoint sites. It provides an overview of the capabilities of modern sites and features that can apply to most classic sites. It demonstrates tools for understanding, remediating, and modernizing classic sites, including a modernization scanner, techniques for transforming different classic page types like wiki and publishing pages, and options for in-place or cross-site modernization. The document encourages starting the modernization journey to reduce growing modernization debt.

Building productivity solutions with Microsoft GraphWaldek Mastykarz

[Jansen] Transforming your classic team sites into modern group connected tea...European Collaboration Summit

SPUnite17 SPFx ExtensionsNCCOMMS

This document discusses SharePoint Framework (SPFx) extensions, how they work, and how to use them. It explains that SPFx initially only supported web parts, but extensions fill that gap. There are three types of extensions: application customizers to extend the UI across pages, command set customizers to add commands to lists and libraries, and field customizers to customize field rendering. It provides examples for each type and discusses prerequisites, debugging techniques, and deployment options. Resources for learning more about SPFx extensions are also listed.

Unity Connect Haarlem 2016 - The Lay of the Land of Client-Side Development c...Marc D Anderson

Are you dazzled by all the noises you hear about client-side development? Do the grunts and gulps leave you a little confused? In this introductory session, we’ll talk about the types of things you can do with client-side development, how SharePoint can be used as a service (SPaaS?) and what the popular tool sets are. Even between writing the abstract and doing the session, things may well have changed. Whether you’re a server-side developer who wants to catch up with the new trends, a power user wanting to flex your muscles in new ways, or an end user who would like to speak more intelligently with IT, this session will provide useful foundational information.

Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris O'Brien

Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien

This document discusses modern techniques for developing for SharePoint in a cloud-friendly way by moving code off SharePoint servers. It covers remote event receivers, PowerShell with CSOM, and Microsoft's App Model Samples. Remote event receivers allow executing code in response to events. PowerShell and CSOM is a powerful combination. The App Model Samples provide helper libraries and examples for common tasks like uploading files, provisioning sites and managing terms. While Microsoft's optimal approach is debated, these techniques allow customizations to be deployed to Office 365.

ECS 19 - Chris O'Brien - The hit list - Office 365 dev techniques you should ...European Collaboration Summit

The document discusses various techniques for working with SharePoint, Microsoft Teams, Azure Functions, and the Microsoft Graph from applications such as SharePoint Framework (SPFx) solutions, PowerApps, and Microsoft Flow. Specific techniques mentioned include calling a secured Azure Function from SPFx; using site designs and PnP templates to provision sites; capturing images from PowerApps and storing them in SharePoint; and using the Microsoft Graph SDK within SPFx solutions, Azure Functions, and other applications. The document provides code examples and references to documentation for implementing these techniques.

Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer

This document discusses methods for deploying branding assets in Office 365 and SharePoint 2013/2016. It covers the pros and cons of traditional deployment methods like copying and pasting files or using farm and sandbox solutions versus newer approaches like provider-hosted and SharePoint-hosted add-ins or PowerShell deployment. Specific assets that can be deployed are listed. The document then dives deeper into different deployment methods and provides demos of deploying fields and binary files using various techniques. It concludes with recommendations around structuring code, handling performance, and using techniques that work across SharePoint on-premises and Office 365 environments.

Custom Development in SharePoint – What are my options now?Talbott Crowell

Relearning SharePoint Developmentbgerman

This document summarizes a presentation about relearning SharePoint development given by Bob German from BlueMetal Architects. It discusses: - The history of SharePoint development approaches from 2003 to 2013 and Microsoft's push to develop solutions outside of SharePoint using apps and client-side APIs. - Three main approaches to modern SharePoint development: developing in the browser, in the cloud, and using Workflow Manager. - Examples of solutions that were re-architected from traditional server-side code to follow these new approaches. - A call to action for SharePoint professionals to update their skills and start developing more in the browser and using client APIs rather than server APIs.

ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ...European Collaboration Summit

The document discusses how developers can reuse their SharePoint Framework skills to build Office Add-ins. It covers why Office Add-ins are useful, how they work, tools for building them like Visual Studio and React, using the SharePoint Framework, and distributing add-ins. The presentation includes demos of creating an add-in using React and the Office UI Fabric library in Visual Studio. It recommends developers sign up for the Office 365 Developer Program and think about how add-ins could help their business needs.

O365Con18 - Site Templates, Site Life Cycle Management and Modern SharePoint ...NCCOMMS

This document discusses site templates, site life cycle management, and modern SharePoint. It introduces site templates, site designs, and PnP provisioning as methods for standardizing site creation. Site designs allow automating site configuration and applying branding/settings. Site scripts define actions like creating lists/libraries and applying themes. Tenant settings can be managed via PowerShell or CLI. Site life cycle management supports updating existing sites according to defined actions and business needs.

Building Flexible SharePoint Solutions with AngularJSbgerman

This document contains details about an online conference session on building flexible SharePoint solutions with AngularJS. The session will be held on June 17th and 18th, 2015 and will be presented by Bob German. The agenda includes an introduction to AngularJS, a discussion of the Remote Provisioning pattern versus the SharePoint add-in model, and a demonstration of a sample AngularJS solution that can be used as an add-in, drag-and-drop solution, or centrally managed solution. Attendees will learn how to build web parts, forms and pages with AngularJS and about the Remote Provisioning pattern as an alternative to the add-in model.

SPUnite17 Introduction to the Office Dev PnP Core LibrariesNCCOMMS

This document discusses the SharePoint Patterns and Practices (PnP) project. It provides reusable code components, extensive samples, and guidance documentation to simplify SharePoint development. The PnP project includes client-side and server-side JavaScript libraries for common SharePoint tasks like retrieving lists, uploading files, and provisioning sites. It supports development for add-ins, the SharePoint Framework, and Microsoft Graph across SharePoint Online and on-premises.

2012 12 best of spc - moving to the sp2013 app modelbgerman

SharePoint and Office 2013 apps allow developers to build apps that integrate with SharePoint. Apps can be hosted on-premises in the SharePoint app web or hosted remotely in Azure. Remote apps use OAuth for authentication and can access SharePoint data through REST APIs. Examples shown include an isolated jQuery app with cross-domain libraries, an Azure-hosted contacts map app, and apps built with various client technologies like WPF, Silverlight, and JavaScript.

SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. Kushan Lahiru Perera

[Patel] SPFx: An ISV Insight into latest Microsoft's customization modelEuropean Collaboration Summit

The document provides an overview of the SharePoint Framework (SPFx) from the perspective of an ISV. It begins by focusing on key aspects of SPFx like publishing versions, pushing updates through a CDN, using shared code and external libraries, and using custom PropertyPane properties. It then provides a history of SharePoint development models and extensibility opportunities. The document explains what SPFx is, its advantages and disadvantages, and choices for the UI framework. It discusses building a solution, publishing, dependencies, consuming data, the advanced PropertyPane, updating SPFx, and provides some helpful tips.

Practical management of development & QA environments for SharePoint 2013SharePointRadi

Speakers: Ognyan Guglev & Radi Atanassov In this session we will share how we maintain our environments for development, quality assurance and demonstration purposes. We've put in a lot of thought into optimising what we do and to deliver a highly-available, performing experience to our delivery teams. For our work we have over 90 farms, so the challenges in maintaining them are not insignificant. Due to advances in the SharePoint platform we believe it is becoming increasingly difficult to maintain SharePoint environments for every project, client or product. We have a strong requirement to be flexible and efficient on hardware and at the same time be able to spawn development environments on demand. Automation here with SCVMM is key to a sustainable work front. We will discuss our goals as a consultancy company, how we deal with licenses, whether we prefer centralised or decentralised team environments, how to automate VM's with Service Center Virtual Machine Manager, how to deal with Microsoft SQL and Active Directory, DNS and IP addresses, what we do to make the developer's time as productive as possible and a whole set of other tips and tricks we put in place. We will also share our Apps development and Office 365 development landscapes. Overall, this session is infrastructure focused, but will be valuable and practical both for administrators and developers, it will cover experiences for both sides of the spectrum.

TypeScript and SharePoint FrameworkBob German

Bob German, a Principal Architect at BlueMetal, gave a presentation about developing SharePoint widgets using TypeScript. He discussed how Microsoft is modernizing SharePoint with the new SharePoint Framework. Widgets provide a way to build reusable components for different SharePoint development models using HTML and JavaScript. TypeScript adds benefits like catch errors earlier and use modern JavaScript features. German demonstrated how to set up TypeScript and build widgets today and in the future SharePoint Framework.

Chris O'Brien - Intro to Power BI for Office 365 devs (March 2017)Chris O'Brien

More Related Content

What's hot (20)

ECS19 - John White - Unlock SharePoint’s Reporting SecretsEuropean Collaboration Summit

ECS19 Bert Jansen - Modernizing your existing sitesEuropean Collaboration Summit

Building productivity solutions with Microsoft GraphWaldek Mastykarz

[Jansen] Transforming your classic team sites into modern group connected tea...European Collaboration Summit

SPUnite17 SPFx ExtensionsNCCOMMS

Unity Connect Haarlem 2016 - The Lay of the Land of Client-Side Development c...Marc D Anderson

Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris O'Brien

Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien

ECS 19 - Chris O'Brien - The hit list - Office 365 dev techniques you should ...European Collaboration Summit

Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer

Custom Development in SharePoint – What are my options now?Talbott Crowell

Relearning SharePoint Developmentbgerman

ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ...European Collaboration Summit

O365Con18 - Site Templates, Site Life Cycle Management and Modern SharePoint ...NCCOMMS

Building Flexible SharePoint Solutions with AngularJSbgerman

SPUnite17 Introduction to the Office Dev PnP Core LibrariesNCCOMMS

2012 12 best of spc - moving to the sp2013 app modelbgerman

SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. Kushan Lahiru Perera

[Patel] SPFx: An ISV Insight into latest Microsoft's customization modelEuropean Collaboration Summit

Practical management of development & QA environments for SharePoint 2013SharePointRadi

ECS19 - John White - Unlock SharePoint’s Reporting SecretsEuropean Collaboration Summit

ECS19 Bert Jansen - Modernizing your existing sitesEuropean Collaboration Summit

Building productivity solutions with Microsoft GraphWaldek Mastykarz

[Jansen] Transforming your classic team sites into modern group connected tea...European Collaboration Summit

SPUnite17 SPFx ExtensionsNCCOMMS

Unity Connect Haarlem 2016 - The Lay of the Land of Client-Side Development c...Marc D Anderson

Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris O'Brien

Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien

ECS 19 - Chris O'Brien - The hit list - Office 365 dev techniques you should ...European Collaboration Summit

Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer

Custom Development in SharePoint – What are my options now?Talbott Crowell

Relearning SharePoint Developmentbgerman

ecs19 - Bill Ayers - RE-USE YOUR SHAREPOINT FRAMEWORK SKILLZ TO BUILD OFFICE ...European Collaboration Summit

O365Con18 - Site Templates, Site Life Cycle Management and Modern SharePoint ...NCCOMMS

Building Flexible SharePoint Solutions with AngularJSbgerman

SPUnite17 Introduction to the Office Dev PnP Core LibrariesNCCOMMS

2012 12 best of spc - moving to the sp2013 app modelbgerman

SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. Kushan Lahiru Perera

[Patel] SPFx: An ISV Insight into latest Microsoft's customization modelEuropean Collaboration Summit

Practical management of development & QA environments for SharePoint 2013SharePointRadi

Viewers also liked (20)

TypeScript and SharePoint FrameworkBob German

Chris O'Brien - Intro to Power BI for Office 365 devs (March 2017)Chris O'Brien

Deep-dive building solutions on the SharePoint FrameworkWaldek Mastykarz

Waldek Mastykarz gave a presentation on building solutions using the SharePoint Framework. Some key points included storing project dependencies using npm, loading frameworks from URLs instead of bundling them, using a services library to share code between parts, and leveraging SharePoint Framework services. The presentation provided an overview of best practices for building solutions on the SharePoint Framework.

Share Point Presentation Introduction To Sharepointrpeterson1

This document provides an overview of SharePoint and where to begin implementing it. It outlines some session objectives, including reviewing SharePoint at a high level and where to start. Various SharePoint templates and features are then described in detail, such as team sites, document libraries, forms, business intelligence capabilities like Excel Services, and more. The document concludes by recommending reviewing business needs and identifying top requirements to focus initial implementation efforts.

Collab Montréal 2016 - SharePoint Framework : De A à ZSébastien Levert

Building solutions with the SharePoint Framework - deep-diveWaldek Mastykarz

Building solutions with the SharePoint Framework - introductionWaldek Mastykarz

Beginners SharePoint introductionMelick Baranasooriya

This document provides an overview of SharePoint 2010, including: - A brief history and evolution of SharePoint products. - An overview of new features in SharePoint 2010 like the ribbon interface, thin client support, Office Web Apps integration, and social computing features. - Descriptions of core SharePoint concepts like the server farm, web applications, site collections, sites, lists, and libraries. - Mentions of tools used to manage and develop solutions for SharePoint like Designer, InfoPath, and Visual Studio. - Highlights of capabilities like web parts, navigation, theming, workflows, and demonstrations planned for subsequent days.

SharePoint OverviewAmy Phillips

Continuing with the SharePoint FrameworkJennifer Kenderdine

SharePoint Enterprise Search Tips and Tricks InfographicJoel Oleson

Application Lifecycle Management for Office 365 developmentChris O'Brien

For teams doing cloud-friendly SharePoint or Office 365 development, apps will be a key area of focus - be they SharePoint add-ins or the newer Office 365/Azure AD apps. ASP.NET (typically MVC) is a common platform here, and fortunately ALM and Continuous Integration become MUCH easier - finally, an end to "it’s harder because it's SharePoint!" We'll demonstrate how Visual Studio Online and Azure Web Apps are a winning combination for “continuous deployment”, and also how features such as "Deployment Slots" in Azure can help with dev and test environments, and also the upgrade/push-to-live process. Several demos will ensure you’re covered for developing both SharePoint add-ins and Office 365 apps.

Making Data Driven Decisions using SharePoint, Chatbots and powerbi JoAnna Cheshire

This document discusses how organizations can leverage real-time data using SharePoint, chatbots, and Power BI. It highlights that data is growing exponentially and more is being generated from devices and sensors. It also notes that users today expect self-service analytics and conversational interactions with technology. The document outlines a demo showing how Cortana Intelligence Suite and Power BI can be used with collaboration tools like SharePoint to enable teams to make data-driven decisions.

Introducción a SharePoint FrameworkHaaron Gonzalez

Intro to the SharePoint Framework Philly Code Camp Oct 2016Jennifer Kenderdine

Jennifer Kenderdine gave a presentation on the SharePoint Framework (SPFx) which allows building client-side web parts for SharePoint using modern web technologies. SPFx uses the same context and connection as the browser, allows controls to render in the DOM, and is framework agnostic. It supports both classic and modern pages in SharePoint. Developers need an Office 365 developer tenant and tools like Node.js, Yeoman and Gulp to build SPFx solutions. The development workflow involves creating a project, editing the web part with TypeScript, testing locally and deploying to a CDN.

SharePoint Frameworks Webinar-Part 1 from SPANG TechnologiesKatalusys Consulting Resourcing

Sharepointmindmajixtrainings

jQuery for Sharepoint DevZeddy Iskandar

Future of SharePoint - Key TakeawaysMark Overdijk

SharePoint User Group UK #FutureOfSharePoint 11 May 2016pearce.alex

TypeScript and SharePoint FrameworkBob German

Chris O'Brien - Intro to Power BI for Office 365 devs (March 2017)Chris O'Brien

Deep-dive building solutions on the SharePoint FrameworkWaldek Mastykarz

Share Point Presentation Introduction To Sharepointrpeterson1

Collab Montréal 2016 - SharePoint Framework : De A à ZSébastien Levert

Building solutions with the SharePoint Framework - deep-diveWaldek Mastykarz

Building solutions with the SharePoint Framework - introductionWaldek Mastykarz

Beginners SharePoint introductionMelick Baranasooriya

SharePoint OverviewAmy Phillips

Continuing with the SharePoint FrameworkJennifer Kenderdine

SharePoint Enterprise Search Tips and Tricks InfographicJoel Oleson

Application Lifecycle Management for Office 365 developmentChris O'Brien

Making Data Driven Decisions using SharePoint, Chatbots and powerbi JoAnna Cheshire

Introducción a SharePoint FrameworkHaaron Gonzalez

Intro to the SharePoint Framework Philly Code Camp Oct 2016Jennifer Kenderdine

SharePoint Frameworks Webinar-Part 1 from SPANG TechnologiesKatalusys Consulting Resourcing

Sharepointmindmajixtrainings

jQuery for Sharepoint DevZeddy Iskandar

Future of SharePoint - Key TakeawaysMark Overdijk

SharePoint User Group UK #FutureOfSharePoint 11 May 2016pearce.alex

Similar to Chris O'Brien - Introduction to the SharePoint Framework for developers (20)

Angular - Chapter 1 - IntroductionWebStackAcademy

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Angular kickstart slideshareSaleemMalik52

Angular Kickstart document provides an overview of Angular including: - Angular is a client side JavaScript framework that allows building of single page applications. - A single page application loads initial content via the first page load and subsequent content without reloading the page. - The document discusses Angular features such as modularity, performance, TypeScript support, and building blocks like modules, components and directives. It also provides instructions on setting up the development environment for Angular applications.

Web worker in your angular applicationSuresh Patidar

Using and extending Alfresco Content ApplicationDenys Vuika

SharePoint Framework at a glanceHaaron Gonzalez

Get a brief overview of the SharePoint Framework, in this session we will discuss why SharePoint Framework is valuable, what is the tool chain available today to start developing, what are the moving pieces that constitute a client side web part, what resources are available to continue learning and enhancing your skills. The goal is to show you what it takes to write your first SPFx web part, possible deploy if time permits.

FlaskMamta Kumari

Flask is a micro web framework written in Python that allows developers to create web applications and APIs quickly. It is lightweight and extensible, allowing developers to add additional functionality through extensions. Flask applications are easy to get started with - they can be created with just a few lines of code. Common features like unit testing, database support, and template rendering are supported out of the box or through extensions.

Contentful with Netgen Layouts workshopIvo Lukac

This document describes Netgen Layouts, a layout and block management system that is intended to control all markup in the <body> section of content-driven sites and applications. It discusses the main concepts of layouts, zones, blocks, collections, and how layouts are resolved. The document then provides a workshop example using Contentful as a headless CMS with the Symfony CMF routing bundle and Netgen Layouts to build a simple site.

slides oif mlsa oigf fhdhd cgdgd gggd bdg.pptxPRINCEOJHA11

White Paper : ASP.NET Core AngularJs 2 and PrimeHamida Rebai Trabelsi

This document provides an overview of ASP.NET Core and instructions for setting up an ASP.NET Core project with Angular 2 and PrimeNG. It discusses .NET Core as a cross-platform, open-source, and modular framework. It then provides steps for installing prerequisites and creating an ASP.NET Core project on Windows, MacOS and Linux. It also covers adding Angular 2 and PrimeNG functionality and integrating them with the ASP.NET Core project.

Progressive Web Application by CitytechRitwik Das

Webpack/Parcel: What’s Happening Behind the React App?Talentica Software

How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver

This is a walkthrough on the tools, steps and process for converting common full trust solution to SharePoint Framework solutions. We will cover several scenariosn and discuss how to handle each appropriately. We have established a general workflow for converting your full trust solutions to SPFx solutions that I will share. We also will cover the proper configuration for your development environment. Lastly I will quickly highlight and show the process for building an SPFx solution and deploying it to Office 365. Lots of DO’s and DON’Ts will be shared. I’ll show you some of my scars too. From this session forward, you will want to hone your skills in modern SharePoint and convert everything to SPFx solutions. Attendee Takeaways: 1. Understand the why, the how, and what make up the SharePoint Framework (SPFx). 2. A demonstration where we take a common Full Trust Solutions and covert it to the SharePoint Framework (SPFx). 3. I share lots of tips, DO’s and DON’Ts to save you hours and days of your life

Beginning MEAN StackRob Davarnia

This document provides an overview of the MEAN stack and demonstrates how to build a sample application with it. It begins with defining each component of the MEAN stack: MongoDB as the database, Express as the web application framework, AngularJS for the frontend framework, and Node.js as the runtime environment. It then demonstrates setting up a basic Express app, integrating authentication with Passport, and interacting with MongoDB using Mongoose. The document also discusses key concepts like asynchronous I/O in Node.js and model-view-controller patterns in AngularJS. Overall, it serves as a high-level introduction to the technologies that make up the MEAN stack.

How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver

End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...Paul Jensen

Building an Ionic hybrid mobile app with TypeScript Serge van den Oever

Angular or ReactOrkhan Gasimov

- Angular is a framework that provides many features out of the box like components, templates, state management, properties, events, HTTP, and routing. - React is a library focused on components but other aspects like state, properties, events, HTTP, and routing require additional libraries. - The presentation compared Angular and React on their approaches to components, templates, state, properties, events, HTTP, and routing.

Lightning Web Component - LWCThierry TROUIN ☁

COB - Azure Functions for Office 365 developersChris O'Brien

Reactjs BasicsHamid Ghorbani

1) Single page applications (SPAs) use JavaScript to dynamically update the content of a single web page rather than loading entire new pages. This reduces page refreshes. 2) React is a popular JavaScript library for building user interfaces, especially for SPAs. It uses a virtual DOM for faster rendering. 3) Create-React-App is a command line interface that sets up a React project with common dependencies like Babel and Webpack preconfigured.

Angular - Chapter 1 - IntroductionWebStackAcademy

Angular kickstart slideshareSaleemMalik52

Web worker in your angular applicationSuresh Patidar

Using and extending Alfresco Content ApplicationDenys Vuika

SharePoint Framework at a glanceHaaron Gonzalez

FlaskMamta Kumari

Contentful with Netgen Layouts workshopIvo Lukac

slides oif mlsa oigf fhdhd cgdgd gggd bdg.pptxPRINCEOJHA11

White Paper : ASP.NET Core AngularJs 2 and PrimeHamida Rebai Trabelsi

Progressive Web Application by CitytechRitwik Das

Webpack/Parcel: What’s Happening Behind the React App?Talentica Software

How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver

Beginning MEAN StackRob Davarnia

How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver

End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...Paul Jensen

Building an Ionic hybrid mobile app with TypeScript Serge van den Oever

Angular or ReactOrkhan Gasimov

Lightning Web Component - LWCThierry TROUIN ☁

COB - Azure Functions for Office 365 developersChris O'Brien

Reactjs BasicsHamid Ghorbani

More from Chris O'Brien (18)

Chris O'Brien - Building AI into Power Platform solutionsChris O'Brien

Chris OBrien - Azure DevOps for managing workChris O'Brien

Chris O'Brien - Ignite 2019 announcements and selected roadmapsChris O'Brien

COB ESPC18 - Rich PowerApps with offline supportChris O'Brien

COB - PowerApps - the good, the bad and the ugly - early 2018Chris O'Brien

Chris O'Brien - Best bits of Azure for Office 365/SharePoint developersChris O'Brien

Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien

Deep dive into SharePoint 2013 hosted apps - Chris OBrienChris O'Brien

Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien

SP2013 for Developers - Chris O'BrienChris O'Brien

The document provides guidance on developing apps for SharePoint instead of classic solutions whenever possible. It discusses SharePoint-hosted and cloud apps. It also discusses whether all apps from the SharePoint Store will be allowed to be installed and if customizations will be developed as apps. Finally, it provides information on web parts, search results, and control templates used to render items for web parts.

Getting to grips with SharePoint 2013 apps - Chris O'BrienChris O'Brien

SharePoint Ribbon Deep DiveChris O'Brien

Automated Builds And UI Testing in SharePoint 2010 DevelopmentChris O'Brien

Optimizing SharePoint 2010 Internet SitesChris O'Brien

Managing the SharePoint 2010 Application Lifecycle - Part 2Chris O'Brien

This document discusses strategies for upgrading SharePoint applications beyond the initial version. It covers upgrading different artifacts like content types, files, and lists using techniques like applying element manifests or mapping files to new locations. The document also addresses upgrading features through the new version attribute and upgrade actions element. It provides recommendations for versioning assemblies and features to track changes across farm upgrades. Special considerations for upgrading workflows are also outlined.

Managing the SharePoint 2010 Application Lifecycle - Part 1Chris O'Brien

This document discusses managing the lifecycle of SharePoint applications beyond the initial version. It covers using Feature XML and code to upgrade SharePoint applications in a standardized way. The initial build can involve provisioning with XML or code. Feature versioning and the new upgrade framework allow specifying upgrade actions using XML or code. Part 2 will discuss upgrading different artifacts like Features and Assemblies.

SharePoint workflow deep-dive Chris O'Brien

The document discusses developing workflows in Visual Studio and InfoPath. It covers key decisions in choosing between Visual Studio and SharePoint Designer workflows, sequential vs. state machine workflows, and using ASPX vs. InfoPath forms. It demonstrates the first steps of building an expense claim workflow in Visual Studio, including using activities and deployment. It also outlines some of the complexities in working with form data, SharePoint tasks, and debugging workflows.

SharePoint Web Content Management - Lessons Learnt/top 5 tipsChris O'Brien

Chris O'Brien - Building AI into Power Platform solutionsChris O'Brien

Chris OBrien - Azure DevOps for managing workChris O'Brien

Chris O'Brien - Ignite 2019 announcements and selected roadmapsChris O'Brien

COB ESPC18 - Rich PowerApps with offline supportChris O'Brien

COB - PowerApps - the good, the bad and the ugly - early 2018Chris O'Brien

Chris O'Brien - Best bits of Azure for Office 365/SharePoint developersChris O'Brien

Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien

Deep dive into SharePoint 2013 hosted apps - Chris OBrienChris O'Brien

Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien

SP2013 for Developers - Chris O'BrienChris O'Brien

Getting to grips with SharePoint 2013 apps - Chris O'BrienChris O'Brien

SharePoint Ribbon Deep DiveChris O'Brien

Automated Builds And UI Testing in SharePoint 2010 DevelopmentChris O'Brien

Optimizing SharePoint 2010 Internet SitesChris O'Brien

Managing the SharePoint 2010 Application Lifecycle - Part 2Chris O'Brien

Managing the SharePoint 2010 Application Lifecycle - Part 1Chris O'Brien

SharePoint workflow deep-dive Chris O'Brien

SharePoint Web Content Management - Lessons Learnt/top 5 tipsChris O'Brien

Recently uploaded (16)

AI Days 2025_GM1 : Interface in theage of AIPrashant Singh

Grade 7 Google_Sites_Lesson creating website.pptxAllanGuevarra1

Determining Glass is mechanical textileAzizul Hakim

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

Vancouver in 2025 is more than scenic views, yoga studios, and oat milk lattes—it’s a thriving hub for eco-conscious entrepreneurs looking to make a real difference. If you’ve ever dreamed of launching a purpose-driven business, now is the time. Whether it’s urban mushroom farming, upcycled furniture sales, or vegan skincare sold online, your green idea deserves a strong digital foundation. The 2025 Canadian eCommerce landscape is being shaped by trends like sustainability, local innovation, and consumer trust. To stay ahead, eco-startups need reliable hosting that aligns with their values. That’s where 4GoodHosting.com comes in—one of the top-rated Vancouver web hosting providers of 2025. Offering secure, sustainable, and Canadian-based hosting solutions, they help green entrepreneurs build their brand with confidence and conscience. As eCommerce in Canada embraces localism and environmental responsibility, choosing a hosting provider that shares your vision is essential. 4GoodHosting goes beyond just hosting websites—they champion Canadian businesses, sustainable practices, and meaningful growth. So go ahead—start that eco-friendly venture. With Vancouver web hosting from 4GoodHosting, your green business and your values are in perfect sync.

OSI TCP IP Protocol Layers description fcbr49917

Seminar.MAJor presentation for final project vivadaditya2501

Organizing_Data_Grade4 how to organize.pptxAllanGuevarra1

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdfAndrHenrique77

cxbcxfzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz7.pdfssuser060b2e1

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

Best web hosting Vancouver 2025 for you businesssteve198109

Breaching The Perimeter - Our Most Impactful Bug Bounty Findings.pdfNirmalthapa24

Cyber Safety: security measure about navegating on internet.manugodinhogentil

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

Looking for powerful and affordable web hosting in Vancouver? 4GoodHosting offers premium Canadian web hosting solutions designed specifically for individuals, startups, and businesses across British Columbia. With local data centers in Vancouver and Toronto, we ensure blazing-fast website speeds, superior uptime, and enhanced data privacy—all critical for your business success in today’s competitive digital landscape. Our Vancouver web hosting plans are packed with value—starting as low as $2.95/month—and include secure cPanel management, free domain transfer, one-click WordPress installs, and robust email support with anti-spam protection. Whether you're hosting a personal blog, business website, or eCommerce store, our scalable cloud hosting packages are built to grow with you. Enjoy enterprise-grade features like daily backups, DDoS protection, free SSL certificates, and unlimited bandwidth on select plans. Plus, our expert Canadian support team is available 24/7 to help you every step of the way. At 4GoodHosting, we understand the needs of local Vancouver businesses. That’s why we focus on speed, security, and service—all hosted on Canadian soil. Start your online journey today with a reliable hosting partner trusted by thousands across Canada.

AI Days 2025_GM1 : Interface in theage of AIPrashant Singh

Grade 7 Google_Sites_Lesson creating website.pptxAllanGuevarra1

Determining Glass is mechanical textileAzizul Hakim

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

OSI TCP IP Protocol Layers description fcbr49917

Seminar.MAJor presentation for final project vivadaditya2501

Organizing_Data_Grade4 how to organize.pptxAllanGuevarra1

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdfAndrHenrique77

cxbcxfzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz7.pdfssuser060b2e1

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

Best web hosting Vancouver 2025 for you businesssteve198109

Breaching The Perimeter - Our Most Impactful Bug Bounty Findings.pdfNirmalthapa24

Cyber Safety: security measure about navegating on internet.manugodinhogentil

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

Chris O'Brien - Introduction to the SharePoint Framework for developers

2. www.sharepointnutsandbolts.com @ChrisO_Brien http://cob-sp.com/COBLinkedIn

3. Subtle shift to client side development Beyond jQuery - developers seeking to use latest tech Still difficult for devs new to SharePoint

4. Modern pages and client web parts Client side applications (list-based and page-based) A new development model New deployment possibilities We’ll focus on these aspects

5. Apps, but no IFrames! Similar to recent Delve blog pages New page “canvas” – no classic web part zones

6. Pure JavaScript implementation “Baked-in JS injection” Simplified end-user experience (e.g. web part properties)

7. Classic pages Modern pages Classic web parts Y N Modern web parts Y Y Modern web parts can work in: But classic web parts can NOT work in modern pages

8. Not just JavaScript, but TypeScript! Use your preferred JS framework – React, Angular, Knockout, jQuery, or none Gulp for build Yeoman for startup No need for Visual Studio!

10. Pre-requisites: Process:

12. Fundamentals TypeScript is expected (at least, for now) Client web parts

13. 1. Variables and types var foo: string var foo: UserProfile var foo: any 2. Typings for libraries (e.g. jQuery, CSOM) 3. Import a module to use it

14. BaseClientSideWebPart provides:

15. Folder Purpose config Settings for bundling/deployment dist Run-time files for your app lib Intermediate folder in build system node_modules JS dependencies src Where you write code typings TypeScript typings cob-sp.com/SPX-Files

18.   

19. 

20. 

21.  

22. Refactor into separate TypeScript classes/use new SpHttpClient class Implement promises (e.g. ES6) for async methods Create class/interface to represent a search result Final code – separate ‘Search’ utility class. GetResultsAsync returns promise with my TS interface representing a search result (with URL, description & title properties):

24. Your files can be hosted anywhere App packages are the deployment vehicle Ensure dependencies are bundled OR referenced

25. Build app in release mode (-- ship) Upload resources to CDN Upload app package (.sppkg) to app catalog Add to page

26. 1. Upload resources to CDN • Use supplied Gulp task (“upload-cdn”), or do it yourself 2. Deal with dependencies • Ensure 3rd party libraries are bundled OR referenced externally 3. Package app • Use supplied Gulp task (“gulp package- solution”) 4. Add to app catalog • Administrator drags and drops into catalog 5. Add to page • Web part can now be added to page

28.   

30. Good news! Likely to be released in a Feature Pack update, some time in 2017

32. There isn’t one! client-side Provider-hosted add-ins/IFrames are still a good choice Create a server-side component (e.g. WebAPI) where necessary

33. SharePoint dev is changing! SPFx does not replace anything Start your dev prep now!

Chris O'Brien - Introduction to the SharePoint Framework for developers

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Chris O'Brien - Introduction to the SharePoint Framework for developers (20)

More from Chris O'Brien (18)

Recently uploaded (16)

Chris O'Brien - Introduction to the SharePoint Framework for developers