Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to The Happy Developer - SharePoint Framework, React, and Mindfulness
Similar to The Happy Developer - SharePoint Framework, React, and Mindfulness (20)
More from Olli Jääskeläinen
More from Olli Jääskeläinen (12)
Recently uploaded
Recently uploaded (20)
The Happy Developer - SharePoint Framework, React, and Mindfulness
- 1. #SPSMUC SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich #SPSMUC The Happy Developer SharePoint Framework, React, and Mindfulness Lead Architect, Collaboration & AI - Sulava Olli Jääskeläinen @_opax
- 2. #SPSMUC PLATINUM SILVER GOLD SharePoint and Office 365 Saturday Munich
- 3. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Olli Jääskeläinen • Lead architect, Collaboration & AI • Microsoft MVP, MCM • An organizer for • Office 365 & SharePoint User Group Finland • SharePoint Saturday Helsinki
- 4. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich SharePoint Framework in nutshell • Modern way to create user interfaces • Builds on open-source development tools • You can use React and other JavaScript frameworks and libraries
- 5. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich SharePoint Framework Building Blocks • SharePoint Web Part /TeamsTab • SharePoint Extensions • Single part app pages in SharePoint • What’s coming • SPFx forTeams personal app and mobile app support (SPFx 1.10) • SPFx for Office (SPFx 1.10 developer preview) • Extending beyond SharePoint – “M365 Framework?”
- 6. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Demo • SharePoint Framework customizations
- 7. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich What is mindfulness? • Living in the moment – right now. • Being aware of your inner state and the world. • Being acceptive towards others and yourself.
- 8. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich React Mix JavaScript and XML?
- 9. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich What is React • Declarative • Component based • Reusable • Stateful
- 10. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Declarative nature of React • JSX • XML/HTML like syntax used by React • Extends the script so that code and HTML can co-exist • TSX • TypeScript equivalent of JSX
- 11. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Demo • TSX in React components
- 12. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Props and State in React • Properties are constant parameters given to React component • State contains variables that present the current state of React component • When the data is loaded • When the user interacts The component re-renders when state changes
- 13. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Demo • Props and state of React component
- 14. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Class components vs. functional components • Class components is the traditional way to create complex stateful components • Functional components are simple • Since React 16.8 Hooks update functional components can be stateful
- 15. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Demo • Class component vs. functional component
- 16. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Office UI Fabric React
- 17. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Office UI Fabric React • Builds on Office UI Fabric controls making them React components • Essential components for Office 365 development • Use them to make your solutions fit to the suite https://github.com/OfficeDev/office-ui-fabric-react
- 18. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Demo • Using Office UI Fabric React components • Icons: https://uifabricicons.azurewebsites.net/
- 19. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich PnP SharePoint Framework Property Controls Elio <3
- 20. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich PnP SharePoint Framework Property Controls • Code Editor • Collection Data • Color Picker • Datetime Picker • Term Picker • People Picker • List Picker • Multiselect • Number • Order • … https://sharepoint.github.io/sp-dev-fx-property-controls/#getting-started
- 21. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Demo • PnP SharePoint Framework Property Controls
- 22. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich How to practice mindfulness? • Read/listen/watch mindfulness stuff • Find a way that suits you • meditation or yoga • preparing motorcycles or taking care of your green house • climbing or hiking • …
- 23. #SPSMU C SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich Key takeaways • SPFx is the most powerful way to customize modern SharePoint • SPFx is extending beyond SP • React is used by SharePoint and Office 365 – why should not you use it as well? • Build on Office UI Fabric and PnP components and controls • Be mindful, be kind.
- 24. #SPSMUC SharePoint and Office 365 Saturday Munich 30 November 2019 ⃒ Microsoft Munich #SPSMUC Don‘t forget to rate the session! THANKYOU!
Editor's Notes
- Extensions: Application customizer (header, footer, way to add your script to all pages), Field customizer (custom code to render fields), Command Sets (to extend the command UI of SharePoint lists and libraries)
- https://opax.sharepoint.com/sites/HappyDeveloper https://teams.microsoft.com/_#/tab::0cb2943d-e348-4bed-b334-da42f341d15b/General?threadId=19:5e324d50f9504e2d85c9dffd7a3e5ea2@thread.skype&ctx=channel
- TeamsChatLink.tsx
- CampusBasedLinks https://opax.sharepoint.com/sites/HappyDeveloper CampusBasedLinks.tsx
- HelloFunctionalReact.tsx
- TeamsChatLink.tsx
- OpenTeamsChatWebPart.ts - PropertyFieldPeoplePicker