Intratic jest częścią

Nowoczesne aplikacje w SharePoint

Paweł Walczewski, Krzysztof Lis

2

1. Nowoczesne aplikacje webowe.

2. Budowanie aplikacji front-endowych.

3. SharePoint Apps.

4. Demo aplikacji.

Agenda

?

Nowoczesne aplikacje

4

Nowoczesne aplikacje

• Single Page App (SPA)

• Mobile-ready (RWD)

• High-DPI – ready

• Wysoka dostępność

• Modny design

Dla użytkownika końcowego?

5

• Frameworki - AngularJS, REACT, Backbone…

• Frameworki CSS-owe – MDL, Boostrap…

• Task runnery - GULPJS, GRUNTJS..

• Dependency management - Bower, NPM

• Scaffolding projektu

Nowoczesne aplikacjeJak mądrze je tworzyć?

6

• Dwu-kierunkowe wiązanie danych

• Rozszerza HTML pozwalając definiować własne tagi

• Wbudowany mechanizm DI (Dependency Injection)

• Zaawansowany routing

• Modułowość – możliwość rozszerzania

AngularJSJeśli SPA, to AngularJS, Ember, Backbone, React (…)

7

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<script>

angular.module('inputExample', []);

</script>

<div ng-app="inputExample">

<input ng-model="binding">

<h1>{{binding}}</h1>

</div>

AngularJS - Dwu-kierunkowe wiązanie danych Jeśli SPA, to AngularJS, Ember, Backbone, React (…)

8

$routeProvider.

when('/phones', {

templateUrl: 'partials/phone-list.html',

controller: 'PhoneListCtrl'

}).

when('/phones/:phoneId', {

templateUrl: 'partials/phone-detail.html',

controller: 'PhoneDetailCtrl'

}).

otherwise({

redirectTo: '/phones'

});

AngularJS - RoutingJeśli SPA, to AngularJS, Ember, Backbone, React (…)

9

• Automatyczne wykonywanie „tasków”

• Minifikacja i łączenie plików

• Kompilowanie - SCSS -> CSS, CoffeScript -> Javascript, JAML -> HTML

• Wykrywanie zmian i odświeżanie okna w przeglądarce

• Sprawdzanie kodu

• Optymalizacja obrazków

• ….

Task runners – zarządzanie zadaniamiJeśli kodować SPA, to tylko przy pomocy GulpJS, GruntJS…

10

gulp.task('watch', function() {

gulp.watch('app/webroot/css/*.scss', ['styles']);

});

gulp.task('styles', function () {

return sass('app/webroot/css/main.scss', {container: 'gulp-ruby-sass-app'})

.on('error', function (err) {

console.error('Error!', err.message);

})

.pipe(gulp.dest('app/webroot/css'))

.pipe(notify({ message: 'Styles task complete' }));

});

Task runners – zarządzanie zadaniamiGulpJS – przykład

11

Scaffoldery aplikacji

Yeoman.io

12

Scaffoldery aplikacji

Yeoman.io1. npm install -g yo gulp bower2. npm install -g generator-gulp-angular3. yo gulp-angular

SharePoint Apps

14

SharePoint Add-in jest to rozszerzenie dla witryn SharePointowych, które są uruchamiane bez

pisania kodu po stronie serwera SharePoint.

• Logika biznesowa może mieć odstęp do danych w danej kolekcji witryn poprzez API.

• Add-in może wpasować się w SharePointa na kilka różnych sposobów:

Add-insMałe dodatki – duże możliwości.

15

Wzorce tworzenia i hostowania aplikacjiDobierz model do swoich potrzeb.

16

Napa – zestaw narzędzi do tworzenia aplikacji dla modelu chmurowego (SharePoint lub

Office). W kontekście SharePointa, Napa pozwala budować aplikacje w modelu SharePoint-

hosted.

Charakterystyka:

• Dostępne z poziomu przeglądarki,

• Możliwość przeglądania oraz pisania kodu w przeglądarce,

• Wspomaga pracę programistów,

• Możliwość otworzenia aplikacji w Visual Studio.

NapaNarzędzie tworzenia aplikacji dla Office 365

W Visual Studio również

można tworzyć aplikacje

SP i jest rekomendowane

do większych projektów.

Zarządzanie urlopami

Przykładowa aplikacja

18

Organizacja pracy

19

Let’s see it!

20

SharePoint Absense Manager

Yeoman + GulpJs +

AngularJS + Angular

Material + API SharePoint

21

Idea tworzenia aplikacji w nowym modelu

Rozszerzenie możliwości SharePointa i łatwa migracja

Poprawa User Experience.

Mniejsze zaangażowanie programistów back-endu.

Łatwiejsze dostosowanie do rozwiązań mobilnych.

Możliwość budowania katalogu aplikacji.

Integracja poprzez API nie tylko z SharePointem.

22

SharePoint i nowy model aplikacji

Zalety

• Łatwiejsze tworzenie aplikacji i zarządzanie nią,

możliwość wykorzystania Javascriptu oraz jego

frameworków, np. AngularJS.

• Brak konieczności instalowania deweloperskiej maszyny

z SharePointem.

• Brak konieczności restartowania IIS po wgraniu aplikacji.

• Możliwość wdrożenia aplikacji w Office 365 jak i w

SharePoincie on-premise.

Ograniczenia

• Możliwość wykorzystania tylko modelu klienta (CSOM,

JSOM)

• Brak Full-trusted solutions

• Brak możliwości zarządzania uprawnieniami jak w

modelu SSOM

• Brak dostępu do obiektów z innej kolekcji witryn.

• W przypadku migracji z on-premise na Office 365,

istniejące rozwiązania serwerowe na farmie należy

przepisać na CSOM, co może wiązać się z

ograniczeniami w docelowym rozwiązaniu.

Co napędza, co ogranicza?

www.unity.plWrocław

ul. Przedmiejska 6–10

54-201 Wrocław

Kraków

ul. Conrada 55B

31-357 Kraków

Poznań

ul. Grottgera 16/1

60-758 Poznań

Paweł Walczewski

Programista interfejsów

606 395 294

pawel.walczewski@unity.pl

Krzysztof Lis

Analityk Microsoft

502 600 305

krzysztof.lis@intratic.eu