Prezentacja z konferencji Intratic Przyjazny SharePoint i nowe narzędzia IT do komunikacji wewnętrznej Warszawa, 22.10.2015

1. Intratic jest częścią
Nowoczesne aplikacje w SharePoint
Paweł Walczewski, Krzysztof Lis

2. 2
1. Nowoczesne aplikacje webowe.
2. Budowanie aplikacji front-endowych.
3. SharePoint Apps.
4. Demo aplikacji.
Agenda

3. ?
Nowoczesne aplikacje

4. 4
Nowoczesne aplikacje
• Single Page App (SPA)
• Mobile-ready (RWD)
• High-DPI – ready
• Wysoka dostępność
• Modny design
Dla użytkownika końcowego?

5. 5
• Frameworki - AngularJS, REACT, Backbone…
• Frameworki CSS-owe – MDL, Boostrap…
• Task runnery - GULPJS, GRUNTJS..
• Dependency management - Bower, NPM
• Scaffolding projektu
Nowoczesne aplikacje
Jak mądrze je tworzyć?

6. 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
AngularJS
Jeśli SPA, to AngularJS, Ember, Backbone, React (…)

7. 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. 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 - Routing
Jeśli SPA, to AngularJS, Ember, Backbone, React (…)

9. 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 zadaniami
Jeśli kodować SPA, to tylko przy pomocy GulpJS, GruntJS…

10. 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 zadaniami
GulpJS – przykład

11. 11
Scaffoldery aplikacji
Yeoman.io

12. 12
Scaffoldery aplikacji
Yeoman.io
1. npm install -g yo gulp bower
2. npm install -g generator-gulp-angular
3. yo gulp-angular

13. SharePoint Apps

14. 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-ins
Małe dodatki – duże możliwości.

15. 15
Wzorce tworzenia i hostowania aplikacji
Dobierz model do swoich potrzeb.

16. 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.
Napa
Narzędzie tworzenia aplikacji dla Office 365
W Visual Studio również
można tworzyć aplikacje
SP i jest rekomendowane
do większych projektów.

17. Zarządzanie urlopami
Przykładowa aplikacja

18. 18
Organizacja pracy

19. 19
Let’s see it!

20. 20
SharePoint Absense Manager
Yeoman + GulpJs +
AngularJS + Angular
Material + API SharePoint

21. 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. 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?

23. www.unity.pl
Wrocł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