Building SharePoint Single Page Applications Using AngularJS

Building SharePoint Single Page Applications Using AngularJS

• 1.
  BUILDING SHAREPOINT SINGLE PAGEAPPLICATIONS USING ANGULARJS STEVE PIETREK (@SPIETREK) HTTPS://GITHUB.COM/SPIETREK/
• 2.
  STEVE PIETREK Cardinal SolutionsGroup App Dev Practice Manager SharePoint Application Architect Front End Developer Raleigh/Durham Contact @spietrek spietrek@cardinalsolutions.com Presentation References https://github.com/spietrek/
• 3.
  AGENDA • SPA OVERVIEW •ANGULARJS OVERVIEW • TOOLS, LIFECYCLE MANAGEMENT, & DATA ACCESS • PROJECTS DEMO • DEPLOYMENT • BEST PRACTICES & GOTCHAS
• 4.
  SINGLE PAGE APPLICATIONS
• 5.
  SINGLE PAGE APPLICATIONS •GOAL: • PROVIDE A DESKTOP-LIKE RICH USER EXPERIENCE • ATTRIBUTES: • ENTIRE SITE CONTENT LOADS WITHIN A SINGLE HTML PAGE • ONLY AREAS OF THE SITE WILL RELOAD BASED ON USER ACTIONS. NO URL CHANGE EXCEPT FOR HASH (#). • STATE MAINTAINED ON CLIENT • PRESENTATION LAYER CAN BE COMPLETELY DECOUPLED FROM BACKEND LAYER • MAIN TECHNOLOGIES: HTML, CSS, JAVASCRIPT, AJAX, WEB SERVICES (E.G. REST) • BENEFITS: • PERFORMANCE • MAINTAINABILITY • CODE REUSE • QUICK DEPLOYMENTS
• 6.
  Not Cloud Ready Performanceand Stability Lifecycle Management Resources "TRADITIONAL" SHAREPOINT DEVELOPMENT CHALLENGES
• 7.
  ANGULARJS OVERVIEW
• 8.
  WHAT'S ANGULARJS? • "SUPERHEROICJAVASCRIPT MVW FRAMEWORK" • STRUCTURAL JAVASCRIPT CLIENT-SIDE FRAMEWORK FOR BUILDING DYNAMIC WEB APPS (USING HTML AND JAVASCRIPT) • EMPOWERS TRADITIONAL HTML • EXTEND HTML'S SYNTAX • BACKED BY GOOGLE AND THE COMMUNITY • OPEN SOURCE (MIT LICENSE) • VIBRANT COMMUNITY (BOOKS, STACK OVERFLOW, BLOGS, PLUG-INS, RESOURCES, ETC.) • ** GREAT FRAMEWORK FOR BUILDING SINGLE PAGE APPLICATIONS ** My opinion
• 9.
  MAIN FEATURES OFANGULARJS Two-way Data Binding MV* Dependency Injection Testing jqLite or jQuery Templates Modules Controllers Filters Providers Directives Routing Form Validation
• 10.
  IMPLEMENTATION OF MV*IN ANGULARJS Controller (Logic/ Behaviors)View (UI) DOM Browser RESTful Web Service Model (Provider) User Interaction (Routes & Behaviors) $scope
• 11.
  ANGULARJS DEMO HTTPS://JSFIDDLE.NET/SPIETREK/04Y3ZWO8/3/
• 12.
  TOOLS AND DATAACCESS
• 13.
  TOOLS AND LIFECYCLEMANAGEMENT • IDE: VISUAL STUDIO, VISUAL STUDIO CODE, WEBSTORM, BRACKETS, ATOM, SUBLIME TEXT • THIRD-PARTY JAVASCRIPT FRAMEWORKS: JQUERY, BOOTSTRAP, MOMENT, GLOBALIZE, DATATABLES, NG-TASTY, FONT AWESOME, SPSERVICES, LODASH/UNDERSCORE • BROWSER PLUG-INS: FIREBUG, BATARANG, POSTMAN • TASK RUNNER: GULP • MODULAR BUNDLER: WEBPACK • PACKAGE MANAGER: NPM, BOWER • SOURCE CONTROL: GIT, GITHUB, BITBUCKET, VISUAL STUDIO ONLINE • TESTING: KARMA, MOCHA, JASMINE, PHANTOMJS • OTHER TOOLS: NODE.JS, FIDDLER
• 14.
  SHAREPOINT 2013 RESTAPI • USE JQUERY AJAX OR ANGULARJS $HTTP • OPTIONS • $SELECT • $FILTER • $TOP • $SKIP • $ORDERBY • $EXPAND • BEST PRACTICES • USE POSTMAN OR FIDDLER TO EXECUTE AND TEST QUERIES • SET THE ACCEPT HEADER • ONLY RETRIEVE WHAT YOU NEED BY USING $SELECT AND $FILTER. • “CHUNKY, NOT CHATTY”
• 15.
  PROJECTS DEMO
• 16.
  DEPLOYMENT
• 17.
  DEPLOYMENT WORKFLOW Create CustomPage Layout •Enable Publishing features •Style and script references •Base HTML referencing ng-app •Upload to Master Page Gallery •Create page using custom page layout Local Test •Gulp tasks (test, serve-dev, serve-specs) •Disable web security (--disable-web- security) errors in Chrome •Functional testing in Chrome SharePoint Deployment •Gulp task (build) •Same folder structure as local environment •Upload source code •Functional testing in SharePoint
• 18.
  BEST PRACTICES &GOTCHAS
• 19.
  BEST PRACTICES • ORGANIZECODE: JOHN PAPA’S ANGULAR STYLE GUIDE HTTP://GOO.GL/XLJMI6 • GROUP BY FEATURE (PROJECTS, FORM, ADMIN), NOT COMPONENT TYPE (E.G. CONTROLLER, DIRECTIVE, PROVIDER) • NAME YOUR FILES BY FUNCTION (E.G. PROJECTS, DASHBOARD, ADMIN) • GROUP ALL FILES TOGETHER (MODULE, CONTROLLERS, SERVICES, DIRECTIVES, UNIT TESTS, END-TO-END TESTS) • ONLY ONE CONTROLLER PER VIEW. SHARE DATA BETWEEN CONTROLLERS USING SERVICES. • BUILD AND DEPLOY OFTEN!!! • LEARN GIT • WRITE UNIT TESTS • TEST IN DIFFERENT BROWSERS
• 20.
  GOTCHAS Issue Workaround SharePoint Item-limitThreshold • Split data into separate lists or libraries. • Add indexes to columns where you want to filter. SharePoint Security • Apply security at the site or list levels. • If possible, avoid item-level permissions. • Use Search API to aggregate across sites and lists. CSS Overrides • SharePoint default CSS may cause style issues. • Deploy to SharePoint and test using different browsers. • Update CSS to run the same in local environment. AngularJS Controller Bloat • Use directives to manipulate DOM. • Data should be stored in services. AngularJS Performance • Avoid 2000 watchers on page (higher in 1.3+). • Use Batarang to search for duplication. • Use bind once for expressions which do not change. Dependencies • Review dependencies whenever upgrading tools (npm & bower). Frameworks • "Framework of the week"