Building SharePoint Apps

With

By Ahmed Elharouny

22nd October 2014

Page

Agenda

› Introduction

› App Model Overview (SharePoint-Hosted, SPA, AngularJS, RequireJS)

› High-level Design

› Demo & Sample Code

› Optimization

› Unit Testing

› Q & A

/ Copyright ©2014 by Readify Pty Ltd2

Page

Introduction

/ Copyright ©2014 by Readify Pty Ltd3

Ahmed Elharouny

Senior Developer at Readify

http://www.harouny.com

Twitter: @harouny

Github: harouny

• Microsoft Technology Specialist (MCTS Web)

• Professional Scrum Master (PSMI)

• 9 years of experience in web development

• I’m not a SharePoint specialist

• I started SharePoint Live Charts to learn about the new app model

Page

App Model Overview

/ Copyright ©2014 by Readify Pty Ltd4

Page

SharePoint Hosted

/ Copyright ©2014 by Readify Pty Ltd5

• Development experience• Instant deployment to SharePoint while modifying in debug mode.

• No external deployment steps

• i.e. IIS, Azure.

• No extra costs & concerns

• Who is paying for resources?

• Leverage SharePoint for services and data storage

• Using client APIs REST or CSOM.

• APP and data is a single unit

• Backup, Restore, Install, Uninstall single unit.

• Still protecting app business logic

• Using business connectivity services and workflows.

Page

Single Page App

/ Copyright ©2014 by Readify Pty Ltd6

• Simpler in development• No need to manage user moving from page to page.• Only update what you want to update.• Persist state on client.

• Rich user experience• No page reloads.• Allow of rich UX.• Progressively download resources when required.

• Modular approach• Think about modules, not pages.

Page

AngularJS

/ Copyright ©2014 by Readify Pty Ltd7

• A JavaScript framework for building client side applications that

runs in the browser.

• Started by Google but quickly became a popular open source

project.

• It aims to simplify development, maintaining and testing

applications.

Page

AngularJS

/ Copyright ©2014 by Readify Pty Ltd8

1999 Inline

2007 Unobtrusive

Knockout

Angular

2013 Data Binding

Page

AngularJS

/ Copyright ©2014 by Readify Pty Ltd9

• Dependency Injection

• Data Binding

• Routing

• Templates

• MVC or MVVM

• Ajax, REST

• Unit Testing

• Animation

Page

AngularJS

/ Copyright ©2014 by Readify Pty Ltd10

• Modules

• Controllers

• Directives

• Filters

• Services

• Configs

• Routes

Services RecipesConstant

Page

AngularJS - Modules

/ Copyright ©2014 by Readify Pty Ltd11

- A module is a logical container for the different parts of your app –

controllers, services, filters, directives, etc.

- A module is not a namespace.

DependenciesName

Page

AngularJS - Modules

/ Copyright ©2014 by Readify Pty Ltd12

Page

AngularJS - Controllers

/ Copyright ©2014 by Readify Pty Ltd13

- A Controller is a JavaScript function that is used to work with scope (view

model).

- Controllers are attached to DOM using ng-controller directive.

Name Dependencies Function

Page

AngularJS - Scope

/ Copyright ©2014 by Readify Pty Ltd14

- AngularJS will always create a root scope driven by the ng-app

directive.

ng-app

ng-controller

ng-controller

Page

AngularJS - Directives

/ Copyright ©2014 by Readify Pty Ltd15

Directives are markers on a DOM element that tell AngularJS to attach a

specified behavior to that DOM.

Built-In Directives

Page

AngularJS - Directives

/ Copyright ©2014 by Readify Pty Ltd16

Custom Directives- Custom directive can be used to provide a declarative markup approach

and reusability.

- There are many ways to declare a directive in markup using (HTML

attributes, elements, comments and CSS classes).

Page

AngularJS - Services

/ Copyright ©2014 by Readify Pty Ltd17

- Services is a way to organize and share code across app.

- Services are lazy initialized and singleton.

Built-In Services• $http

• $log

• $window

Custom Services

Page

RequireJS

/ Copyright ©2014 by Readify Pty Ltd18

• RequireJS is a JavaScript file and module loader.

• It supports Asynchronous Module Definition AMD.

• Asynchronous Module Definition (AMD) API specifies a

mechanism for defining modules such that the module and its

dependencies can be asynchronously loaded.

Page

RequireJS

/ Copyright ©2014 by Readify Pty Ltd19

common.js

common.config.js

• Load scripts faster.

• Manage script dependencies

for you.

• Script loading is

Configurable.

• Mock scripts during test.

Page / Copyright ©2014 by Readify Pty Ltd20

High-level Design

Route

Page / Copyright ©2014 by Readify Pty Ltd21

High-level Design

Page

Demo

/ Copyright ©2014 by Readify Pty Ltd22

https://github.com/harouny/GitHubAppForSharePoint

Sample Code

Page

Optimization

/ Copyright ©2014 by Readify Pty Ltd23

Page

RequireJS Optimizer

/ Copyright ©2014 by Readify Pty Ltd24

• Combine related scripts together into minified files.

• Uses r.js file.

• node is recommended to run it. (java, browser can do it as well).

• Add this to a Post Build Script.

Build output

configs

Build folder

Page

RequireJS Optimizer

/ Copyright ©2014 by Readify Pty Ltd25

• You can switch between the optimized and the non-optimized versions.

• The non-optimized version is needed during development and debugging.

Page

Optimizing HTML files

/ Copyright ©2014 by Readify Pty Ltd26

• You can minify, combine, cache HTML templates used by AngularJS so that

Angular doesn’t need to make an Ajax request for every new template.

• Can be done manually or with a tool like grunt-angular-templates

See it in action

Page

Unit Testing

/ Copyright ©2014 by Readify Pty Ltd27

Page

Unit Testing

/ Copyright ©2014 by Readify Pty Ltd28

• Jasmine• Chutzpah• Chutzpah configuration file • RequireJS setup• angular-mocks

Page

Q & A

/ Copyright ©2014 by Readify Pty Ltd29

Thank you