More Related Content
Similar to Sps Oslo - Introduce redux in your sp fx solution
Similar to Sps Oslo - Introduce redux in your sp fx solution (20)
More from Yannick Borghmans
Recently uploaded
Recently uploaded (20)
Sps Oslo - Introduce redux in your sp fx solution
- 1. aOS Luxembourg 6 décembre 2018 Introduce Redux in your SPFx solution Yannick Borghmans #SPSOSLO, December 7th, 2019
- 2. yannickborghmans.com Linkedin.com/in/yborghmans @yborghmans Yannick Borghmans Office 365/SharePoint Technical Lead @Ventigrate
- 4. Thank you to our APP Sponsor Please go to store on IOS or Android to download. Login with email used to register Type Code #SPSOslo19
- 5. Thank you to Sennheiser for raffle gifts
- 6. aOS Luxembourg 6 décembre 2018 What to expect? Introduction React What is Redux Middleware Tooling SPFx Tips & Tricks
- 7. React
- 8. React React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components” Fast!!!
- 12. <CustomHeader heading=“Whoooooot! This is awesome” subtitle=“Welcome tot SPS Oslo”/>
- 15. React Props and State do similar things but are used in different ways. The majority of your components will probably be stateless. Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed. State is used for mutable data, or data that will change. This is particularly useful for user input. Think search bars for example. The user will type in data and this will update what they see.
- 16. React Props and State do similar things but are used in different ways. The majority of your components will probably be stateless. Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed. State is used for mutable data, or data that will change. This is particularly useful for user input. Think search bars for example. The user will type in data and this will update what they see.
- 17. React Props and State do similar things but are used in different ways. The majority of your components will probably be stateless. Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed. State is used for mutable data, or data that will change. This is particularly useful for user input. Think search bars for example. The user will type in data and this will update what they see.
- 20. Demo Building ‘simple’ React application
- 22. Redux
- 23. Redux Redux is a state container, it stores all of your state in one place The state is read only, the only way to change state is to dispatch an action. State can only be changed by pure functions or in another term: Reducers. Redux Reducers take in the previous state and an action object and returns the next state.
- 24. Three Principles Single source of truth State is read-only Changes are made with pure functions
- 26. aOS Luxembourg 6 décembre 2018
- 27. What to do in SPFx? Add • Actions • Reducer • Store • Application State ‘Decouple’ components Dispatch events
- 29. Middleware
- 30. Middleware It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.
- 32. Examples of Middleware • API Calls • Aure • SharePoint • Logging
- 34. Tooling
- 35. Redux DevTools Extension • npm install --save-dev redux-devtools-extension
- 36. Demo
- 37. SPFx Tips & Tricks
- 38. Split up actions (Redux) • Gets really quick ‘dirty’ • Split up by functionality • User actions • SP lists
- 39. State libraries Redux Mobx Flux React Hooks
- 40. Debugging in production 1. gulp clean 2. gulp serve --nobrowser 3. add at the end of the url the following url paramters: &loadSPFX=true&debugManifestsFile=https://localhost:4321/temp /manifests.js 4. confirm to load debug scripts
- 41. Comments • Type in /**
- 42. PnP JS + PnP Controls • Installing PnP JS in your SPFx solution • npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp --save • Usage • sp.web.lists.getByTitle("Sessions").items.getAll().the n((items) => { console.log(items); })
- 43. Office UI fabric
- 45. Logging Application insights Create wrapper – change where to log Debug level => propertypane
- 46. VSCode extensions • VSCode Icons • SPFx Snippets • Settings Sync • Rencore Deploy SPFx package • One Monokai Theme • Bracket Pair Colorizer • Gitlens • API Management
- 47. Key takeaways
- 48. Key takeaways SMALL SPFX SOLUTION => NO REDUX SPLIT UP ACTIONS USE DEVTOOLS PUT EVERYTHING IN STATE MIDDLEWARE FOR (SP) API CALLS
- 49. Introduce Redux in your SPFx solution Yannick Borghmans #SPSOSLO, December 7th, 2019
Editor's Notes
- React is a JavaScript library for building user interfaces. It is the view layer for web applications. At the heart of all React applications are components. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are composable. A component might include one or more other components in its output. Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application. For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We'd then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it. Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances.
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components