spbreed.github.io

Keeping custom code away from the server To comply with web standards Get user adoption on non-microsoft platforms Submit to Office stores Better upgrade process

Web Standards

Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web.
Protocols, best practices, Strategies used with any front end development
Helps to develop powerful, flexible, modular, expressive enterprise applications using HTML, Javascript and CSS

Web Standards- Adoption

AppModel is now a standard in developing and deploying apps
Adopted by few big names including Microsoft

Why Angular

Powerful Client side MVC\MVVM framework to create large enterprise applications

Dependency Injection

Using this, custom modules can be injected just like adding assemblies on the server side code. This makes life little easier design MVC/MVVM based projects with separation of concern, modularity etc. An Analogy to server side code is represented below

HTML Templating and Directives

Over the past few years, Single Page App’s (SPA’s) are gaining of a lot of traction from front end developers and end users. HTML templating feature in Angular makes it possible to easily switch the HTML in SPA’s.
Directives are markers on a DOM element which attach a special behavior to it.
Simple directives like ng-model,ng-repeat,ng-show, etc are building blocks of an AngularJS App

TwoWay Binding

Fellow Silverlight developers can understand the complexity of two-way binding using propertychange events back in the old days. But AngularJS databinding makes this right OOB.

Community Support

Google continues to develop and maintain the library. Large community of developers has embraced the framework so ample support is available on Stackoverflow and AngularJS official site.

Error Handling

Troubleshooting and error handling JS apps is pain. AngularJS apps can be configured with Logging and Error handling capabilities.

Where I Learned AngularJS

Basics of AngularJS in 60 minutes - Dan Wahlin Large Scale webapps using AngularJS - JohnPapa

Large Scale SharePointApps using AngularJS - Andrew Connell

AngularJS - Jumpstart

Office 365 - AngularJS

Office 365 + Office OWA using Angular

ShareCoffee

ShareCoffee is a lightweight library for calling SharePoint services

App Web Host web Chrome Controls User Profiles Search Supports AngularJS

ShareCoffee - Jumpstart

SPAngularAppTemplate

SPAngularApptemplate is a Nuget package which creates a starting point for building SharePoint hosted SPA's.

To install SPAngularAppTemplate

Create Expenses list on host web. Download List template Delete all the default files in the sp hosted app before installing this package Install the package

PM> Install-Package SPAngularAppTemplate

Click here to watch this in action

Testing AngularJS Apps for O365 -An intro

Testing AngularJS Apps for O365 - Demo

View this project on Github

Testing Javacript Apps

Modern Web Apps pre-dominantly use javascript Multiple browsers Flexible, Updatable and reusable code Continous improvement

Popular AngularJS Testing frameworks

Test Tools
- Protractor
- Karma
- Server-Side testing
Javascript Engines
- Selenium
- PhantomJS
Languages
- Jasmine
- Mocha
- QUnit

What tool to use?

Testing Page loads and End to End testing
- Use Protractor
- A Web Driver can run a full integration test through any given URL
- No server side dependencies
Unit testing
- Use Karma
- Test files should be hosted inside the server
Load Testing
- Use Server side testing

What is Jasmine

Jasmine is an automated testing framework for JavaScript.

Each WebPage have set of functional DOM elements.
Processes within a Web application are triggered by DOM events.
Button clicks, setting the focus on an element, document loading and any other event resulting from a user action or the browser.
Jasmine will provide methods to deal with DOM events.

Jasmine Specification

"Describe" defines functional blocks
"It" describes specification
"Expect" defines expectations

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('yourName')).sendKeys('Julie');

    var greeting = element(by.binding('yourName'));

    expect(greeting.getText()).toEqual('Hello Julie!');
  });

Jasmine features

Locating HTML
- element.By.className('redBtn')
- element.By.css('.redBtn')
- element.By.id('loginButton')
- element.By.linkText('Go Home')
- etc
Methods
- clear()
- SendKeys()
- click()
- getLocation()
- etc

What is Protractor

An AngularJS E2E Testing Framework Introduced during AngularJS 1.2 and Beyond presentation A new replacement of the existing E2E Testing framework

Features

Allows running tests targeting remote addresses, No longer need to have test files on the server being tested Built on WebdriverJS and Selenium Server New syntax when writing tests Can use Jasmine or Mocha to write test suites

How it Works

Runs on NodeJS server Protractor uses WebDriver API to send test cases to Web Server Web Server interpretter compiles it down to JSON and passed it to browser

Installation

Install NodeJS server Create a NodeJS project in Visual studio Install Protractor via Node Package Manager (NPM) (This is similar to NUGET) Install Selenium Server and update Web-Driver For manual downloads http://selenium-release.storage.googleapis.com/index.html

# Install protractor from NPM. Run this on the node project folder
npm install protractor@1.3.1 --save-dev

#Run this from the project folder to update web driver
node_modules\.bin\webdriver-manager update --ie

#Add Screenshot capabilities to protractor
npm install protractor-html-screenshot-reporter --save-dev

Configuration

Selenium Server Configuration Where your spec files are located Browser capabilities required by spec files The Base Url for your spec files Jasmine Node Configuration

Example Configuration

// An example configuration file.
exports.config = {
  // Do not start a Selenium Standalone sever - only run this using chrome.
  chromeOnly: true,
  chromeDriver: 'node_modules/protractor/selenium/chromedriver',

  //baseURL

 // baseUrl: 'https://spbreed02.sharepoint.com/sites/appdev/_layouts/15/appredirect.aspx?instance_id={7000E10A-58A6-4668-AEDC-0B1FD6091280}',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  // Spec patterns are relative to the current working directly when
  // protractor is called.
  specs: ['angularapp_spec.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
    }

};

Running Test Scripts

Create a NodeJS project in Visual Studio Install protractor and update the web driver Run the configuration file

#Run the sample configuration file 
node_modules\.bin\protractor chromeOnlyConf.js

Jump start AngularJS app development for Office 365 and E2E testing using Protractor – Table of Contents – AngularJS - Jumpstart

spbreed

Jump start AngularJS app development for Office 365 and E2E testing using Protractor – Table of Contents – AngularJS - Jumpstart

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();