konferencja intratic przyjazny sharepoint, krzysztof lis, paweł walczewski, nowoczesne metody...
TRANSCRIPT
2
1. Nowoczesne aplikacje webowe.
2. Budowanie aplikacji front-endowych.
3. SharePoint Apps.
4. Demo aplikacji.
Agenda
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
12
Scaffoldery aplikacji
Yeoman.io1. npm install -g yo gulp bower2. npm install -g generator-gulp-angular3. yo gulp-angular
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.
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.
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
Krzysztof Lis
Analityk Microsoft
502 600 305