Marius ConstantinescuD03: Rapidly building data-driven modern Office 365 Cloud Business add-ins with LightSwitch HTML

28 mai 2016#SPSParis @c_marius

Diamond

Platinum

Gold

Silver

Organizers& Community

www.spsevents.org/city/Paris/Paris2016

Keynote Speaker: Jeff Teper Microsoft Corporate

Vice-PresidentSharePoint + OneDrive

Donation

Tombola / Raffle

After Jeff Teper’s KeynoteAprès la Keynote de Jeff Teper

2

4

21

4

4

3

MVP Office Servers and Services (previously on SharePoint & Office365)

MC* > e.g. MCT, MCSE, MCITP, MCPD & others I forgot

Solutions Architect with a focus on ECM & Collaboration, Enterprise Search, integration solutions.

Regional Leader of the Swiss SharePoint Club (600+ members)

Speaker at local/international events (Swiss SPC, SPS-*, Tech-Days, Soft-Shake)

Ego me > Marius ConstantinescuManaging Consultantblue-infinityGeneva, Switzerland@c_marius

c_marius@msn.comch.linkedin.com/mct365

What do we mean by “modern, cloud business apps”?

Busin

ess U

ser • Cross-devices

– on any device at any time

• Responsive , adaptive Design, touch ready

• “Cool”…

Arch

itect • Multi-tier

architecture• Patterns &

more patterns (e.g. MV*)

• Integration with Line-Of -Business

• Infinite Scalability

• Modelling tools for business entities with rules validation

UX

Spec

ialis

t/Des

igne

r• Fluent, Ergonomic, Minimalistic design

• Clear interaction flows, navigation

• Material Design

Deve

lope

r •Best IDE , syntax highlighting, intellisense

•Automatic dependency management, error checking for CSS/JavaScript,

•minification of resources

•Complex Libraries/ Frameworks & more (Knockout, Durango, BreezeJS, AngularJS, )

•Databinding, Widgets, Web Components, etc.

What is Visual Studio LightSwitch?Development environment in Visual Studio (2013+) to rapidly build data-driven business productivity apps & services1. Focus 1st on modelling business

logic Powerful integrated designers (data modelling, entities, relationships,

validation rules) Response web mobile-ready apps, essentially a SPA, cross-device compatible

UX (Template driven screens creation)

2. Same deployment model as regular SharePoint Apps Publish On-Premises (IIS), Microsoft Azure (Web Sites / Cloud Services)

or 3rd party Office 365 / SharePoint 2013

What is LightSwitch shining through ?Desktop Business Apps (Silverlight)

Optimized for heavy data entry, mouse & keyboard scenarios, with legacy app integration (i.e. COM)

Default screen templates provide no-code experiences for manipulating data in a variety of ways

Mobile Web Business Apps (HTML SPA) Optimized for touch devices on multiple platforms (iOS, Android, WP8,

WinRT) Default screen templates provide no-code experiences that can target

multiple form factors

Cloud Business Apps with Provider Hosting Leverage experiences and infrastructure for app access, organizational

identity, and lifecycle management Provider hosting (IIS, Azure) allows flexible operational infrastructure

choices

LightSwitch (V3.1) Key Features•Other MVVM pattern Ability to consume/expose custom

business model as REST Web Service Globalization - Localize HTML clients (using

human readable .resjon) LINQ queries enabled over DataWorkspace ServerApplicationContext for custom

services (easy onboard SP CSOM code, WebAPI, etc.)

Automatic Row tracking (useful in reconciliation scenarios)

• Performance App load: minification, static compression OData: reduced payload size (using JSON

lite)

•HTML Client Responsive design supports multiple form factors Produces Single-Page-Applications (SPAs) jQueryMobile 1.9 support Streamlined screen creation & navigation Command bars Popups and Screens as dialogs Semantic types (Person, Phone, Email) for improved

validation

• SharePoint 2013/ Office 365 business apps

Connect to SharePoint 2013 Lists as Entities Access SharePoint assets via CSOM Provider-hosted deployment SharePoint On-Prem or Office 365

LightSwitch Architectural Overview

* OData endpoints enable other clients (e.g. Excel, Windows Store apps, WPF, Web Apps, etc.) to access to the middle-tier services without bypassing business rules or compromising security

Data Workspace

Data Workspace

WCF Data Service

Silverlight HTML 5Desktop Mobile

ASP.NET 4.0+

IIS 7+

Data Workspace

Screens | Methods | Controls

SQL Server

Azure

SharePoint

OData Services

CustomData Workspace

WCF Data ServiceOData Service

Submit Pipeline | Queries

LightSwitch Developer roadmapDe

scrib

e

Build data model (data sources, entities, relationship)Create Screens (Tabs, Command Bars, Dialogs, Navigation boundaries) Re

fine

Enhance data model• Custom business

logic (include code based)

• Validation rules• Filters, Queries

(e.g. Parameterized)

Refine screens and dialogs• Theme/Brand the

App• Perform layout

adaptations • Code-based

customizationsSetup Security (Server-side and/or client-side)

Exte

nd

Custom business types (e.g. SSN, AVS etc.)Extend Services (e.g. WebAPI)Enhance with custom UI componentsAdd support for custom Data Sources Pu

blish

Decide hosting strategyCollect required keys/certificatesEstablish database deployment

LightSwitch 101 – a lap around an HTML Single Page AppShowcasing some of the great features of LightSwitch HTML client, via an mobile-ready app for EventsUsing the FREE edition of Visual Studio 2013/2015 Community Edition Review VS LightSwitch Project templates Explore designers – Data, Query & Screen Review Code writing capabilities (Client vs.

Server) Enhance app with a bit more complex

validation rules (e.g. ensure color codes use Hex format)

DEMO

Model data, create relationships, queries

Create screens, pop-ups and themes

MVVM in LightSwitch

JavaScript library files

jquery/ jquery.mobileJavaScript libraries that provide cross browser functionality

MslsThe primary LightSwitch framework library that provides the application functionality

WinjsA helper library for things such as Promise objects that handle asynchronous calls

DatajsUsed to provide OData communication an contains a representation of all the data objects in the LightSwitch application

viewModel.jsDefines the JavaScript representation of the screens and allows programmatic access to the screens

Anatomy of a Cloud Business App Office

Store SharePoint

app catalog

Manifest

OData (JSON lite)

LightSwitch Web Site

Service layer

Configured

Data sources

• Cloud business app is SharePoint App with added middle-tier hosted elsewhere , connected to data sources

• Clients talk to SharePoint via cross-domain calls

• Ability to use Newsfeed, and associate Documents to business entities

REST / CSOM

SharePoint 2013

Office 365OAuth

• The provider-hosted middle-tier is authenticated with SharePoint via OAuth

• Middle-tier service layer can model SharePoint and potentially connect to other external data sourcesModern browser client

(HTML5 SPA)

Cloud Business App Project Dedicated project template in the

“Office/SharePoint” Just like with a “SharePoint App” allows

deployment additional SharePoint assets (lists, content types, etc.)

CSOM references are added to Server project automatically so you can access SharePoint host web

Enable/Disable SharePointMigrate existing apps

Hybrid Authentication CodeServer 2 Server or ACS (soon no longer) with no changes to code

SharePoint List Attach uses user’s identity (not app pool)

Get access to Application.SharePoint & Application.User

Automatically add references and CSOM

Publishing to corporate store

Event Companion appA data-driven mobile-ready business app using LightSwitch HTML clientEnhancing the LightSwitch web project for Events with some more goodness Expanded the LightSwitch Server project Exploit LightSwitch server APIs More on Code writing capabilities

DEMO

Hosting Options for LightSwitch Apps

Microsoft Azure IIS on-premises 3rd party hosting

External data sources can be other types

IIS 7+ is recommended

SharePoint 2013 Add-Ins (option)

Cloud

On-Prem

Desktop Client Silverlight 5 in-

browser (Windows, Mac)

Out-of-browser (Windows only)

Browsers HTML client

optimized for iOS 5/6, Android 4, WinRT, Win Phone 8.

SQL Azure

SQL Server (for the Intrinsic Database)

SharePoint 2013

Thank you!

Online evaluation formEvaluations en ligne

http://bit.ly/SPSParis2016Eval

Merci !