Leveling up choosing your client-side inventory
•Download as PPTX, PDF•
0 likes•11 views
Session presented at SharePoint Saturday Houston - April 2018 and Oklahoma City SPUG - August 2018.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Leveling up choosing your client-side inventory
Similar to Leveling up choosing your client-side inventory (20)
Recently uploaded
Recently uploaded (20)
Leveling up choosing your client-side inventory
- 1. Leveling Up Choosing your Client-side Inventory
- 2. 2 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Software Engineer at Applied Information Sciences • Contributing Author: Microsoft SharePoint 2013 Inside Out • Year 12 of 15-Life with SharePoint • @SPSamL • samlarko@gmail.com • Sam.larko@appliedis.com • Developertherapy.blogspot.com • Blog.Appliedis.com About your DM
- 3. 3 | © 2018 Applied Information Sciences, Inc. • Founded 1982 • Headquartered in Reston, VA • Regional Offices in Columbia, Maryland; Raleigh, North Carolina; Dayton, Ohio; Austin, Houston and San Antonio, Texas; Hyderabad, India About AIS • 50% government and 50% commercial clients • 450+ employees • Washington Business Journal Top 50 Fastest Growing Companies • Washington Business Journal Best Places to Work
- 4. San Antonio, Texas: TS/SCI Cleared Data Center Technicians Azure Architects Azure Developers Check out our openings: www.WorkatAIS.com Email our Recruiting team: Recruiting@appliedis.com We’re Hiring!
- 5. 5 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • State of JavaScript • Questions to consider • SharePoint/O365 • JS Library Categories • Tie it together Quest Steps
- 6. 6 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • 2017 survey of 20k+ devs • +/- 200 libraries/tools/languages used • 8 major categories State of JS – stateofjs.com
- 7. 7 | © 2018 Applied Information Sciences, Inc. www.appliedis.com 1. What tools/libraries does the team have experience with? 2. Is there existing code? What does it depend on? i. Does it make sense to replace? 3. Core web technologies or a customized version of them? 4. How big is the library? 5. Does it allow 3rd-party widgets? How hard to integrate? 6. What educational resources are available? 7. What is the support story? Considerations
- 8. 9 | © 2018 Applied Information Sciences, Inc. www.appliedis.com SharePoint Development SharePoint 2010 SharePoint 2013 SharePoint 2016 SharePoint Online Farm Solutions Sandbox Solutions SharePoint Hosted App Provider Hosted App SharePoint Framework Ad-hoc/Manual JS Feature Pack 2 required
- 9. 10 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Client-side Object Model (C# & JS) • SharePoint Framework • SPServices • Graph API • Office UI Fabric • Patterns & Practices Client-side SharePoint
- 10. 11 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • ES6 • TypeScript • CoffeeScript Flavors/Transpilers
- 11. 12 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Current standard of JS • Features • Arrow Functions • Modules • Template Literals • Classes • Promises ES6
- 12. 13 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Simplifies code • Removes most symbols • New line, new command* • Whitespace matters • No extra files…just JS CoffeeScript
- 13. 14 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Superset of JavaScript • Strongly-typed variables • Visual Studio Intellisense • OOP • Still just JavaScript • ES Feature Implementations: • Most ES5 • Many ES6 • Some ES7 TypeScript
- 14. 16 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Angular • React • Vue Front-end
- 15. 17 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Coffee-serving kitchen sink == BIG • AngularJS vs Angular (2,4,5,6) • JS vs TS • Routing • Dependency Injection • Directives • Services Angular
- 16. 18 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Virtual DOM • One-way data binding • JSX React
- 17. 19 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Similarities to Knockout and Angular syntax • Single File Components • Small • Reactive variables Vue
- 18. 21 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Vanilla CSS • SASS/SCSS • Bootstrap CSS
- 19. 22 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Tried and true • CSS3 introduces many new features • Animations, Transitions, 3D Transforms • Calculations • Media queries • Webfonts Vanilla CSS
- 20. 23 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Pre-processor • Works with CSS • Directives: Mixins, Content • Variables • Nesting SASS
- 21. 24 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Grid system • Responsive • Lots of components • JS plugins • Templates Bootstrap
- 22. 26 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Scaffolding • Build & Packaging • Package Management Tools
- 23. 27 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Yeoman • Slush • CLIs Scaffolding
- 24. 28 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Webpack • Gulp Build and Packaging
- 25. 29 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Bundler • Complex configuration • Extended with loaders/plugins Webpack
- 26. 30 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • Task Runner • Plugins Gulp
- 27. 31 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • NPM • Yarn • Bower • Nuget Package Management
- 28. 33 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • SPFx – default choices are made • On-Prem/Add-Ins – generally free reign Applied to SharePoint
- 29. 35 | © 2018 Applied Information Sciences, Inc. www.appliedis.com • A lot of links, just check out my Pocket list and search for any of the library names as tags sharedli.st/spsaml Resources
- 30. 36 | © 2018 Applied Information Sciences, Inc. www.appliedis.com Questions
Editor's Notes
- Includes non-js options like .Net and PHP Categories: Flavors (ES6), Front-end (React), State Management (REST API, Redux), Back-end (Express), Testing (Mocha), CSS (SASS/SCSS), Build Tools (NPM), Mobile (Native, Electron)
- 1. Don’t overdo new stuff. Could kill the project. 2. Depending on amount of existing libraries, may make sense to keep with existing. Is there value in replacing? Will it fit into the schedule? 3. Vanilla JS vs Elm/TS/CoffeeScript. CSS vs SASS. Standard vs custom modules 4. Small utility or MV* framework? MomentJS vs Angular 5. Think Kendo UI, Jquery UI, Office UI Fabric 6. Free vs Paid. Blog vs video vs conference. Do authors provide support (free or paid)? 7. Is it maintained? What’s the update cycle? Are bugs fixed in a timely fashion?
- J/CSOM: Since 2010, API for accessing SP assets/objects SPFx: New Toy! Framework for building webparts and extensions (UI customizations: notifications, toolbars, and list views) SPServices: wrapper for old XML web services, built on Jquery, added functionality (i.e. cascading dropdowns) Graph API: REST APIs for Office 365 (AAD, SPO, 1Drive, Teams, Planner, ID Mngr, Intune, etc) OUIF: official UI of O365, Icons, Typography, Brand icons, buttons, additional components (i.e. Combo box, Date Picker) P&P: Wrapper for REST API, JSOM-like, components (i.e. Taxonomy picker, People Picker)
- EE: Elm, Flow, ClojureScript, Reason
- Arrow: Think Lambdas. Anonymous function means this maintains calling scope Modules: members are private by default. Solves dependency chains. With bundlers, limits number of script tags needed Temp Lit: C# String Interpolation. No more string concat’ing. Classes: Not like C# classes. Cleaner implementation for prototypes. No properties, just methods. Promises: synchronous programming in an async world. Just say no to race conditions. Differences between Promise and JQ Deferred. JQ-D doesn’t capture errors.
- No brackets, semicolons Nesting chains commands Still need parens for function calls Splats: Catches parameters as an array of objects
- Great for those of us who avoided JS Very C#-y Classes allow properties
- Other notables: Aurelia, Ember, Backbone, Polymer
- It does everything! MV* Framework V2 minified about 570K AngularJS == 1.x == pure JS Angular == 2+ == TS Routing: Navigation within the app w/o reloads (SPA) DI: Class receives dependencies externally rather than creating them Directives: custom DOM object: element/Component, attribute Services: Data managers. Calls the REST API or data source.
- 132K vDOM: Same props as real DOM, but can’t change screen. JSX render every vDOM object is updated. React then compares vDOM before/after update (diffing), then updates diffs in real DOM only 1Way: Use this.props to store variables rendered by child components. JSX: Preprocessor, JS XML, Allows directive-like functionality (i.e. ChildComponent)
- 63K Angular == handlebars {{ varName }} KO == v-for, v-if .Vue files store HTML, JS, and CSS – Can pseudo-split using <script src=“x.css”> and require(“ViewModelClass”) Vars are observables by default Style scoped = scopes CSS to only this component
- LESS, Stylus
- Animations: Auto-start, loopable Transitions: Triggered on CSS prop change (:hover), explicit monitoring of changes Calc: Cross measurement calculations, use case: content div has prev sibling header. Content div needs to scroll on small height. Parent element doesn’t have height set (else overflow-y works) Media: responsive design glue, types (all, print, screen, speech) - only: older browsers won’t render, requires media type - not: inverse of query, requires media type - and: both conditions must be true - or ( , ): comma instead of word Webfonts: link to font, formats: TrueType (TTF), OpenType (OTF), Web Open Font Format (WOFF/WOFF 2.0), SVG Fonts/Shapes, Embedded OpenType (EOT)
- Extends CSS with code-like features Mixins: Group CSS declarations for reuse Content: Allows extending a mixin…Sort of inheritance-like Vars: One value to rule them all…or reuse, at least Nesting: Clearer scoping
- Design/Styling framework built on HTML and CSS Grid: 12 column grid using classes: container, row, col-<size> Components: glyphicon, navbar, alerts, etc JS Plugins: Jquery based, modals, carousel, tabs, collapse Templates: free and paid options
- Free up time for devs to spend time decluttering inbox and avoiding extra meetings Scaffolding: creates files w/ boilerplate code B&P: optimizations, deployment PM: import libraries
- Generators scaffold whole projects to useful parts Yeoman: King of the hill, many generators Slush: new, gulp based, few generators CLIs: Angular/Vue/React, geared to specific library only, conventions/features are baked in
- Initial use: Combine and minify Loaders: Transpile (TS > JS, images > data URLs), import files directly from modules, Plugins: Minify, copy files to another/build directory, compress assets, etc.
- Automate tedious build processes: bundle, minify, compression 3 main methods: gulp.task, gulp.src, gulp.dest .pipe: Promise-like task call
- NPM – King of JS packages, shrinkwrap for exact version tracking, needs to be called for updates Yarn – built on NPM, yarn.lock file w/ exact installed package versions, keeps lock file updated (NPM doesn’t), faster than npm Bower – 16K+ client-side packages registered, being maintained but suggested to move to Yarn and Webpack Nuget – Does have client-side packages, but primarily .Net/server-side
- SPFx – npm, gulp, mocha, React/KO/none, TypeScript - Vue is easy enough, Angular 2+ sort-of, Sahil Malik has a PoC demo