SlideShare a Scribd company logo

Ulepszanie aplikacji webowej z AngularJS

Porównam na kilku przykładach rozwiązania AJAX / jQuery z alternatywą w postaci AngularJS.

1 of 37
Download to read offline
Ulepszanie aplikacji 
webowej z AngularJS 
Tomasz Bąk
Agenda 
● wprowadzenie do AngularJS 
● kilka przykładów użycia bibliotek 
● mała aplikacja kanban board
AngularJS 
● 108 kB 
o vs jQuery 1.11 ~ 98 kB 
o vs Ember.js 1.8.1 ~ 353 kB 
o lodash.js ~ 28 kB 
● 32 278★ 
o vs jQuery 32 672★ 
o vs Ember.js 11 915★ 
o vs lodash.js 6 809★
MVC 
http://www.mutuallyhuman.com/blog/2014/05/08/angularjs-services-and-factories-done-right/
Data binding
Dyrektywy

Recommended

AngularJS szkolenie wewnętrzne (into)
AngularJS szkolenie wewnętrzne (into)AngularJS szkolenie wewnętrzne (into)
AngularJS szkolenie wewnętrzne (into)Marcin Baran
 
Bohater UI bez front end developera ?
Bohater UI bez front end developera ?Bohater UI bez front end developera ?
Bohater UI bez front end developera ?Quick-Solution
 
REvolution, czyli o bardziej obiektowym podejściu w Railsach
REvolution, czyli o bardziej obiektowym podejściu w RailsachREvolution, czyli o bardziej obiektowym podejściu w Railsach
REvolution, czyli o bardziej obiektowym podejściu w RailsachThe Software House
 
Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)
Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)
Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)Sunscrapers
 
Diagnozowanie problemów z JavaScriptem na stronie - Techniczne SEO
Diagnozowanie problemów z JavaScriptem na stronie - Techniczne SEODiagnozowanie problemów z JavaScriptem na stronie - Techniczne SEO
Diagnozowanie problemów z JavaScriptem na stronie - Techniczne SEOMaria Cieślak
 
Zastosowanie Google Tag Managera w optymalizacji strony internetowej
Zastosowanie Google Tag Managera w optymalizacji strony internetowejZastosowanie Google Tag Managera w optymalizacji strony internetowej
Zastosowanie Google Tag Managera w optymalizacji strony internetowejŁukasz Kołodziejczyk
 
Historia jednej migracji - Angular 5
Historia jednej migracji - Angular 5Historia jednej migracji - Angular 5
Historia jednej migracji - Angular 5Przemek Smyrdek
 

More Related Content

What's hot

Functional widgets in Rails
Functional widgets in RailsFunctional widgets in Rails
Functional widgets in RailsSebastian Sito
 
Asynchroniczne testy JavaScript aplikacji webowych
Asynchroniczne testy JavaScript aplikacji webowychAsynchroniczne testy JavaScript aplikacji webowych
Asynchroniczne testy JavaScript aplikacji webowychFuture Processing
 
REACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JS
REACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JSREACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JS
REACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JSTomasz Netczuk
 
Angular js warsztaty stopień 2
Angular js   warsztaty stopień 2Angular js   warsztaty stopień 2
Angular js warsztaty stopień 2Marcin Wosinek
 
Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014Tomasz Dziuda
 
Worklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłościWorklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłościMarcin Gajda
 
Pan Oponka - Biografia
Pan Oponka - BiografiaPan Oponka - Biografia
Pan Oponka - BiografiaFilip Tepper
 
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"Dariusz Kalbarczyk
 
Szybkie prototypowanie i development we VueJS
Szybkie prototypowanie i development we VueJSSzybkie prototypowanie i development we VueJS
Szybkie prototypowanie i development we VueJSThe Software House
 
Co nowego w ASP.NET MVC 4?
Co nowego w ASP.NET MVC 4?Co nowego w ASP.NET MVC 4?
Co nowego w ASP.NET MVC 4?tkryskiewicz
 
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...The Software House
 
Równoległy rozwój Aplikacji Webowych | Codesushi
Równoległy rozwój Aplikacji Webowych | CodesushiRównoległy rozwój Aplikacji Webowych | Codesushi
Równoległy rozwój Aplikacji Webowych | CodesushiKrzysztof (Chris) Ozog
 
Angular 4 pragmatycznie
Angular 4 pragmatycznieAngular 4 pragmatycznie
Angular 4 pragmatycznieSages
 

What's hot (14)

Functional widgets in Rails
Functional widgets in RailsFunctional widgets in Rails
Functional widgets in Rails
 
Asynchroniczne testy JavaScript aplikacji webowych
Asynchroniczne testy JavaScript aplikacji webowychAsynchroniczne testy JavaScript aplikacji webowych
Asynchroniczne testy JavaScript aplikacji webowych
 
REACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JS
REACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JSREACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JS
REACT NATIVE - CZYLI ZAPROGRAMUJMY APLIKACJĘ NATYWNĄ W JS
 
Angular js warsztaty stopień 2
Angular js   warsztaty stopień 2Angular js   warsztaty stopień 2
Angular js warsztaty stopień 2
 
Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014
 
Worklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłościWorklety i magiczne interfejsy z przyszłości
Worklety i magiczne interfejsy z przyszłości
 
Pan Oponka - Biografia
Pan Oponka - BiografiaPan Oponka - Biografia
Pan Oponka - Biografia
 
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"
AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"
 
Projektowanie i implementacja usług sieciowych
Projektowanie i implementacja usług sieciowychProjektowanie i implementacja usług sieciowych
Projektowanie i implementacja usług sieciowych
 
Szybkie prototypowanie i development we VueJS
Szybkie prototypowanie i development we VueJSSzybkie prototypowanie i development we VueJS
Szybkie prototypowanie i development we VueJS
 
Co nowego w ASP.NET MVC 4?
Co nowego w ASP.NET MVC 4?Co nowego w ASP.NET MVC 4?
Co nowego w ASP.NET MVC 4?
 
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
 
Równoległy rozwój Aplikacji Webowych | Codesushi
Równoległy rozwój Aplikacji Webowych | CodesushiRównoległy rozwój Aplikacji Webowych | Codesushi
Równoległy rozwój Aplikacji Webowych | Codesushi
 
Angular 4 pragmatycznie
Angular 4 pragmatycznieAngular 4 pragmatycznie
Angular 4 pragmatycznie
 

Similar to Ulepszanie aplikacji webowej z AngularJS

Kariera it Sopot
Kariera it SopotKariera it Sopot
Kariera it Sopotneoteric-eu
 
HYC - Angular stań się kanciastym
HYC - Angular stań się kanciastymHYC - Angular stań się kanciastym
HYC - Angular stań się kanciastymDariusz Jagieło
 
Podstawy Asp.Net Mvc 1.0 W 3600 Sekund
Podstawy Asp.Net Mvc 1.0 W 3600 SekundPodstawy Asp.Net Mvc 1.0 W 3600 Sekund
Podstawy Asp.Net Mvc 1.0 W 3600 Sekundemdzej
 
Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?
Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?
Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?Tomasz Lelek
 
Java. Aplikacje bazodanowe. Najlepsze rozwiązania
Java. Aplikacje bazodanowe. Najlepsze rozwiązaniaJava. Aplikacje bazodanowe. Najlepsze rozwiązania
Java. Aplikacje bazodanowe. Najlepsze rozwiązaniaWydawnictwo Helion
 
Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!The Software House
 
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowychAJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowychWydawnictwo Helion
 
Single Page Applications przy wykorzystaniu REST
Single Page Applications przy wykorzystaniu RESTSingle Page Applications przy wykorzystaniu REST
Single Page Applications przy wykorzystaniu REST3camp
 
AngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektuAngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektu3camp
 
AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.Rafał Filipek
 
Webinar - Podstawy Node.js
Webinar - Podstawy Node.jsWebinar - Podstawy Node.js
Webinar - Podstawy Node.jsWojciech Kaniuka
 
Websites vs Cloud Services - OLMUG
Websites vs Cloud Services - OLMUGWebsites vs Cloud Services - OLMUG
Websites vs Cloud Services - OLMUGBart Zaremba
 
Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...
Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...
Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...Mateusz Paprocki, PMP
 
Obiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressie
Obiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressieObiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressie
Obiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressieWordCamp Polska
 
MvvmCross na przykładach w Xamarin.Android
MvvmCross na przykładach w Xamarin.AndroidMvvmCross na przykładach w Xamarin.Android
MvvmCross na przykładach w Xamarin.AndroidIn'saneLab
 

Similar to Ulepszanie aplikacji webowej z AngularJS (20)

Kariera it Sopot
Kariera it SopotKariera it Sopot
Kariera it Sopot
 
HYC - Angular stań się kanciastym
HYC - Angular stań się kanciastymHYC - Angular stań się kanciastym
HYC - Angular stań się kanciastym
 
Podstawy Asp.Net Mvc 1.0 W 3600 Sekund
Podstawy Asp.Net Mvc 1.0 W 3600 SekundPodstawy Asp.Net Mvc 1.0 W 3600 Sekund
Podstawy Asp.Net Mvc 1.0 W 3600 Sekund
 
Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?
Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?
Jak przerobić monolityczną aplikację na architekturę mikro serwisów ?
 
Java. Aplikacje bazodanowe. Najlepsze rozwiązania
Java. Aplikacje bazodanowe. Najlepsze rozwiązaniaJava. Aplikacje bazodanowe. Najlepsze rozwiązania
Java. Aplikacje bazodanowe. Najlepsze rozwiązania
 
Jaki framework wybrać
Jaki framework wybraćJaki framework wybrać
Jaki framework wybrać
 
Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!
 
Ext js
Ext jsExt js
Ext js
 
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowychAJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych
 
Single Page Applications przy wykorzystaniu REST
Single Page Applications przy wykorzystaniu RESTSingle Page Applications przy wykorzystaniu REST
Single Page Applications przy wykorzystaniu REST
 
AngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektuAngularJS (nie) nadaje się do dużego projektu
AngularJS (nie) nadaje się do dużego projektu
 
AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.AngularJS (nie) nadaje się do dużych pojektów.
AngularJS (nie) nadaje się do dużych pojektów.
 
Webinar - Podstawy Node.js
Webinar - Podstawy Node.jsWebinar - Podstawy Node.js
Webinar - Podstawy Node.js
 
Websites vs Cloud Services - OLMUG
Websites vs Cloud Services - OLMUGWebsites vs Cloud Services - OLMUG
Websites vs Cloud Services - OLMUG
 
Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...
Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...
Jak oszczędzać czas zespołu w środowisku mikroserwisów, czyli efektywny flow ...
 
WordCamp Lublin 2017
WordCamp Lublin 2017WordCamp Lublin 2017
WordCamp Lublin 2017
 
Obiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressie
Obiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressieObiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressie
Obiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressie
 
Środowisko PWA
Środowisko PWAŚrodowisko PWA
Środowisko PWA
 
MvvmCross na przykładach w Xamarin.Android
MvvmCross na przykładach w Xamarin.AndroidMvvmCross na przykładach w Xamarin.Android
MvvmCross na przykładach w Xamarin.Android
 
JavaServer Faces. Wydanie II
JavaServer Faces. Wydanie IIJavaServer Faces. Wydanie II
JavaServer Faces. Wydanie II
 

More from Tomasz Bak

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in ReactTomasz Bak
 
Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?Tomasz Bak
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypressTomasz Bak
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React ApolloTomasz Bak
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packagesTomasz Bak
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?Tomasz Bak
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2 Tomasz Bak
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Tomasz Bak
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript PromisesTomasz Bak
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpTomasz Bak
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmailTomasz Bak
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005Tomasz Bak
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScriptTomasz Bak
 

More from Tomasz Bak (18)

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in React
 
Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to React
 
JAMstack
JAMstackJAMstack
JAMstack
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React Apollo
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQL
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packages
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with Gulp
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmail
 
Kerberos
KerberosKerberos
Kerberos
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005
 
Ldap novell
Ldap novellLdap novell
Ldap novell
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScript
 

Ulepszanie aplikacji webowej z AngularJS