Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Dog food conference creating modular webparts with require js in sharepoint
Similaire à Dog food conference creating modular webparts with require js in sharepoint (20)
Dernier
Dernier (20)
Dog food conference creating modular webparts with require js in sharepoint
- 1. Creating Modular WebParts with RequireJS in SharePoint Dog Food Conference Tuesday, September 30th, 2014 Christopher Fahey
- 2. About Developer at Cardinal Solutions Group Doing SharePoint development for over 2 years Two Scrum certifications PSM, PSD Two Microsoft certifications 70-480, 70-486
- 3. Logistics Use Hubb.me to schedule a one on one with me http://dogfoodcon.hubb.me Tweet at Dog Food https://twitter.com/hashtag/DogFoodCon #DogFoodCon @DogFoodCon Principles apply to various platforms/solutions Interactive presentation - ask questions during
- 4. Goals Assuming everyone is a developer Beneficial and learn something as IT Pro, Manger, etc. Start building front-end solutions using RequireJS Encourage development of modular code
- 6. Front end file and module loader AMD - Asynchronous Module Definition What are JavaScript modules? Encapsulate code into useful units and then expose its data and behavior Optimization tool
- 8. Large project have many files in which managing the dependencies for each file becomes cumbersome Having to write many script tags is not scalable Easy to load scripts on demand References to other dependencies are done via global variables - often implicitly
- 10. Pro Tip “ Implied global variables should never be used. Use of global variables should be minimized. Douglas Crockford ” http://javascript.crockford.com/code.html
- 11. Why Start Using RequireJS Many popular libraries already work with RequireJS Decouples your applications Ease of maintenance
- 12. Distinct functionality Small, single purpose scripts Single Responsibility (SOLID) Divide and conquer large applications into small blocks Helps manage dependencies Microsoft is pushing development towards front-end coded solutions in SharePoint
- 13. Doing things the app way “ Custom code that runs on the SharePoint servers is not allowed in Apps for SharePoint. MSDN ” http://msdn.microsoft.com/en-us/library/office/jj163114(v=office.15).aspx
- 15. RequireJS Basics ● Three global variables ○ window.define(); ○ window.require(); ○ window.requirejs; ● Assumes all scripts are in the /scripts directory ● The .js file extension is assumed ● Browser support back to IE6 and Firefox 2
- 16. require() specify any dependencies runs like an immediate function require([“welcome”], function (welcome) { welcome.showTodaysDate(); welcome.greetUser(); });
- 17. define() define() states we are creating module and using jQuery returns an object that exposes the desired data and behavior define([“jquery”], function ($) { var todaysDate = new Date(); return { today: todaysDate, showTodaysDate: function() { $(“.todays-date”).text(todaysDate); }, greetUser: function () { $(“.welcome”).text(“Hi”); } }; });
- 18. configs() baseUrl is the root path for all module lookups paths is a mapping of urls for any module names shims helps manage dependencies of scripts many more configuration options require.config({ baseUrl: “/Style Library”, paths: { “jquery”: “jquery.1.7.1”, “u”: “underscore.1.7.0” }, shims: { “backbone”: { deps: [“jquery”, “u”] } } });
- 20. Creating a WebPart Create a new SharePoint 2013 Project Deploy as Sandbox Solution Create a Visual WebPart Add Scripts leveraging RequireJS
- 21. WebPart
- 22. Project Setup
- 23. User Control
- 26. Lazy Loading Scripts (continued) Charts.js file was not downloaded until “Show All Data” button was clicked - about 20 seconds after page load
- 27. Lessons Learned Very quick and easy to start using RequireJS, but unlikely current code base will “just work” Figure out a pattern and stick with it Naming Keep files small, do one thing at a time
- 28. Example
- 29. Testing Example
- 30. Resources http://requirejs.org http://addyosmani.com/writing-modular-js http://blog.teamtreehouse.com/organize-your-code- with-requirejs http://youtube.com/watch?v=eRqsZqLyYaU
- 31. Discussion Slides http://www.slideshare.net/fahey252 Connect https://www.linkedin.com/in/christopherpatrickfahey Schedule a one on one http://dogfoodcon.hubb.me
Notes de l'éditeur
- 6 months and has changed the way I develop code Ridiculously easy with tons of benefits. Found it leads to better design and most important code reusability. Reminds me of when I used jQuery 1/3’s front-end developers/already using RequireJS?
- Happily employed at Cardinal Solutions Been on an awesome and large SharePoint project for over 2 years Developed 60 custom rapid solutions using front-end code Pursuing (MCSD) certification
- Sponsors, learn something or meet someone new, never know when they can help you Was at Sencha talk this morning and Sencha has a requires property – very similiar Not just me talking - throw a hand up in the air, speak out
- Deliver value JavaScript heavy and uses many powerful features of JavaScript Protips There are many options. Improve the speed and the quality of your code. will touch on lessons learned at the end once we go through examples.
- RequireJS is ridiculously easy.
- Optimized for browser use but can be used in other environments like Node. Lots of different patterns (front end) for JavaScript modules. Includes an optimization tool (r.js and UgligyJS) you can run as part of your packaging steps for deploying your code. The optimization tool can combine and minify your JavaScript files to allow for better performance. I will not be talking about the optimization part feature of RequireJS.
- Knowing dependencies and their order is generally assumed. Dependencies are assumed to be immediately available. Load small scripts in pieces instead of one large monolithic procedural file, especially in mobile senarious
- Dependencies, number, ordering
- pollution the global namespace. Question? Does anyone know what an implied global variable is?
- Encourages modular code - Increases reusability Single Responsibility - focus on code correctness and maintenancey Script loading - asynchronously/in parallel Microsoft has invested heavily in REST for front-end development/JSOM
- Microsoft pushing towards front end code in SP. More code, more dependencies, more problems. True for Office365 and SharePoint hosted apps
- require(): loads dependencies and run the code the trailing .js is assumed - assumes all files being loaded are JS files.
- define(): create reusables modules (Use) returns module the trailing .js is assumed - assumes all files being loaded are JS files. State fundamental difference between define() and require()
- Paths are kinda like shortcuts the trailing .js is assumed - assumes all files being loaded are JS files. configs: exports, packages, i18n, waitSeconds
- Any questions thus far? Showing a simple example of a project in Visual Studio using RequireJS
- RequireJS is the entry point for the application
- Make explicit that I clicked the Show All Data
- Notice initiator is RequireJS Especially important for a mobile app to only load resources as they are needed.
- In general, easy to make script AMD ready/work with RequireJS Wish would have started using sooner. Keither Mayer - “Steal what you can, build what you can’t” - on Automation with Powershell in Azure
- Wish would have started using sooner. In general, easy to make script AMD ready/work with RequireJS
- usese Jasmine for BDD testing. Develop and refactor code with confidence.
- Summary: Ridiculously easy to get started, huge payouts. Will change the the way you develop code. Questions: Who is ready to start Using RequireJS? Improvements: Add a before and after code about before RequireJS and after what it looks like.