Prezentacja z meetupu grupy "Uszanowanko Programowanko", tematyka AngularJS: http://www.uszanowanko.pl/angular Autor: Krystian Parma. Chcesz dowiedzieć się jak AngularJS poradził sobie z tradycyjnym i nieco ociężałym środowiskiem niemieckiego ośrodka naukowego? A może interesuje cię czym jest Beschleunigerkomponentenlager? Jeśli tak, to ta prezentacja jest dla Ciebie!

1. AngularJS
Czyli o czym warto pamiętać
programując za Odrą
Krystian Parma

2. Odra
Hamburg

4. Deutsches Elektronen-
Synchrotron

7. Założenia
• Przyjazna obsługa
• Urządzenia mobilne
• Jeden kod
• Technologie webowe

8. POTEM ZERKNĘLIŚMY DO
KODU...

11. Activex

12. GW
T

13. tylko
IE6 i 7

15. Nasze założenia
• SPA
• technologie
– AngularJS
– Leafletjs
– Java Spring

17. Zaczynamy...

18. Metodyka pracy?!

19. AGILE?

21. Search
Browse
Read
Navigate
Submit
Contact
Location
Person
Map
Plan
Equipment
Document
Failure Record
Schedlue
POI
Locate
Guest
Visitor
Organizationmember
(from Search)
«abstract»
Search Data
(from Search)
Search Location
(from Search)
Search Person
(from Search)
Search POI
Visitor
Organization
member
Search
Guest POI
Person
Location
«abstract»
Browse geodata as
images
«abstract»
Browse list of locable
elements
Browse List of
Locations
Browse List of POI
Browse Plan
Browse Map
GIS Casual Web Client
«abstract»
Browse Geodata
«abstract»
Search Geo and
Person Data
«abstract»
Find position of
Destination
«abstract»
Navigate to
Destination
«abstract»
Read Destination
Information
Submit Failure or
Issue Report
Visitor / Guest
Organization
Member
Destination - can be
person, facility or POI
Contact Person
«abstract»
Find route to
Destination
«extend»
Location
Person
Equipment
Document
Map
POI
Infrastructure
element
Schedule
FailureRecord
Plan
+FacilityUser
1
Issues
0..*
+SeminarRoom
1
1
+Caretaker
0..1
Takescareof
+Building
0..*
+Responsible
person
0..1
Isresponsiblefor
+Room
0..*
+Employee
0..1
Occupies
+Workstation
0..*
0..*
has
sublocation
1..*
0..*
1
Canbeviewedon
0..*
0..*
Affects
1..*
0..* Affects
1
0..*
Canbeviewedon
1..* 0..*
0..*
Canbeviewedon
0..*
1
Canbeviewedon
0..*
1
Canbeviewedon
+Area,
Building
0..*
Describes
0..*
Describes
1..*
0..*
Describes0..*
1..*
Canbeviewedon
+Floor,
Room
0..*
0..*
Islocatedin
0..*
Client side
Main Menu
GPS data
GPS NavigationModule
GPS data
Tree Browser
Map
QR data
QR Module
QR data
Core Module
Search Box
Action Menu
Locations
data
Locations Module
Locations
data
Person data
Person Module
Person data
FR data
Failure ReportModule
FR data
POI data
POI Module
POI data
Search Item
Server side
REST Services
POI
service Location
service
Person service
FR service
GPS service
QR service
Search Resuls
Person Information
Map with selected
Building
Smart Search
Autocomplete Results
Advanced Search
Foor plan with selected
Room
Header
Smart Search [Keboard type]
[Smart Search
Textbox selected]
[Search button]
[Advanced search suggestion
(nothing found)]
[Room name]
[Building name]
[Person name]
[Room name]
[Buildi
[Person name]
Guest/Visitor
(from Actors)
Tree Browser
Core
Map
Location
A
click()
nodeClicked(nodeData)
changeUrl(buildingId)
callController()
highlight(buildingId)
Facility Management
Services
Housekeeping
Services
Support Staff
Services
Property
Management
Services
Security Services Electromechanical
Services
And many more...

22. Server Application
«executionEnvironment»
Web Server
MapGuideLibraries
Extensions
Map Agent«Database Server»
Spatial Data Storage
MapGuideWebStudio
MapGuide AJAXViever
CustomViewer
b Tier
Client Tier
nate SystemLibrary
.
.
.
API
API
Search
Browse
Read
Navigate
Submit
Contact
Location
Person
Map
Plan
Equipment
Document
Failure Record
Schedlue
POI
Locate
Guest
Visitor
Organizationmember
(from Search)
«abstract»
Search Data
(from Search)
Search Location
(from Search)
Search Person
(from Search)
Search POI
Visitor
Organization
member
Search
Guest POI
Person
Location
«abstract»
Browse geodata as
images
«abstract»
Browse list of locable
elements
Browse List of
Locations
Browse List of POI
Browse Plan
Browse Map
GIS Casual Web Client
«abstract»
Browse Geodata
«abstract»
Search Geo and
Person Data
«abstract»
Find position of
Destination
«abstract»
Navigate to
Destination
«abstract»
Read Destination
Information
Submit Failure or
Issue Report
Visitor / Guest
Organization
Member
Destination - can be
person, facility or POI
Contact Person
«abstract»
Find route to
Destination
«extend»
Location
Person
Equipment
Document
Map
POI
Infrastructure
element
Schedule
FailureRecord
Plan
+FacilityUser
1
Issues
0..*
+SeminarRoom
1
1
+Caretaker
0..1
Takescareof
+Building
0..*
+Responsible
person
0..1
Isresponsiblefor
+Room
0..*
+Employee
0..1
Occupies
+Workstation
0..*
0..*
has
sublocation
1..*
0..*
1
Canbeviewedon
0..*
0..*
Affects
1..*
0..* Affects
1
0..*
Canbeviewedon
1..* 0..*
0..*
Canbeviewedon
0..*
1
Canbeviewedon
0..*
1
Canbeviewedon
+Area,
Building
0..*
Describes
0..*
Describes
1..*
0..*
Describes0..*
1..*
Canbeviewedon
+Floor,
Room
0..*
0..*
Islocatedin
0..*
Client side
Main Menu
GPS data
GPS NavigationModule
GPS data
Tree Browser
Map
QR data
QR Module
QR data
Core Module
Search Box
Action Menu
Locations
data
Locations Module
Locations
data
Person data
Person Module
Person data
FR data
Failure ReportModule
FR data
POI data
POI Module
POI data
Search Item
Server side
REST Services
POI
service Location
service
Person service
FR service
GPS service
QR service
Search Resuls
Person Information
Map with selected
Building
Smart Search
Autocomplete Results
Advanced Search
Foor plan with selected
Room
Header
Smart Search [Keboard type]
[Smart Search
Textbox selected]
[Search button]
[Advanced search suggestion
(nothing found)]
[Room name]
[Building name]
[Person name]
[Room name]
[Buildi
[Person name]
Guest/Visitor
(from Actors)
Tree Browser
Core
Map
Location
A
click()
nodeClicked(nodeData)
changeUrl(buildingId)
callController()
highlight(buildingId)
Facility Management
Services
Housekeeping
Services
Support Staff
Services
Property
Management
Services
Security Services Electromechanical
Services
And many more...
Search Resuls
Main Menu
Tree Browser
Map with selectedBuilding
Building Information
Smart Search
AutocompleteResultsAdvanced Search
Adjusted AdvancedSearch
Header
Smart Search
[Building name]
[Tree Browser menu option]
[Building name]
[Search Scope
select]
[Search button]
[Building name]
[Keboard type]
[Main Menu button]
[Advanced Search menu option]
[Advanced search suggestion
(nothing found)]
[Search button]
[Smart Search
Textbox selected]
[Show on the Map butto

23. Server Application
«executionEnvironment»
Web Server
MapGuideLibraries
Extensions
Map Agent«Database Server»
Spatial Data Storage
MapGuideWebStudio
MapGuide AJAXViever
CustomViewer
b Tier
Client Tier
nate SystemLibrary
.
.
.
API
API
Search
Browse
Read
Navigate
Submit
Contact
Location
Person
Map
Plan
Equipment
Document
Failure Record
Schedlue
POI
Locate
Guest
Visitor
Organizationmember
(from Search)
«abstract»
Search Data
(from Search)
Search Location
(from Search)
Search Person
(from Search)
Search POI
Visitor
Organization
member
Search
Guest POI
Person
Location
«abstract»
Browse geodata as
images
«abstract»
Browse list of locable
elements
Browse List of
Locations
Browse List of POI
Browse Plan
Browse Map
GIS Casual Web Client
«abstract»
Browse Geodata
«abstract»
Search Geo and
Person Data
«abstract»
Find position of
Destination
«abstract»
Navigate to
Destination
«abstract»
Read Destination
Information
Submit Failure or
Issue Report
Visitor / Guest
Organization
Member
Destination - can be
person, facility or POI
Contact Person
«abstract»
Find route to
Destination
«extend»
Location
Person
Equipment
Document
Map
POI
Infrastructure
element
Schedule
FailureRecord
Plan
+FacilityUser
1
Issues
0..*
+SeminarRoom
1
1
+Caretaker
0..1
Takescareof
+Building
0..*
+Responsible
person
0..1
Isresponsiblefor
+Room
0..*
+Employee
0..1
Occupies
+Workstation
0..*
0..*
has
sublocation
1..*
0..*
1
Canbeviewedon
0..*
0..*
Affects
1..*
0..* Affects
1
0..*
Canbeviewedon
1..* 0..*
0..*
Canbeviewedon
0..*
1
Canbeviewedon
0..*
1
Canbeviewedon
+Area,
Building
0..*
Describes
0..*
Describes
1..*
0..*
Describes0..*
1..*
Canbeviewedon
+Floor,
Room
0..*
0..*
Islocatedin
0..*
Client side
Main Menu
GPS data
GPS NavigationModule
GPS data
Tree Browser
Map
QR data
QR Module
QR data
Core Module
Search Box
Action Menu
Locations
data
Locations Module
Locations
data
Person data
Person Module
Person data
FR data
Failure ReportModule
FR data
POI data
POI Module
POI data
Search Item
Server side
REST Services
POI
service Location
service
Person service
FR service
GPS service
QR service
Search Resuls
Person Information
Map with selected
Building
Smart Search
Autocomplete Results
Advanced Search
Foor plan with selected
Room
Header
Smart Search [Keboard type]
[Smart Search
Textbox selected]
[Search button]
[Advanced search suggestion
(nothing found)]
[Room name]
[Building name]
[Person name]
[Room name]
[Buildi
[Person name]
Guest/Visitor
(from Actors)
Tree Browser
Core
Map
Location
A
click()
nodeClicked(nodeData)
changeUrl(buildingId)
callController()
highlight(buildingId)
Facility Management
Services
Housekeeping
Services
Support Staff
Services
Property
Management
Services
Security Services Electromechanical
Services
And many more...
Search Resuls
Main Menu
Tree Browser
Map with selectedBuilding
Building Information
Smart Search
AutocompleteResultsAdvanced Search
Adjusted AdvancedSearch
Header
Smart Search
[Building name]
[Tree Browser menu option]
[Building name]
[Search Scope
select]
[Search button]
[Building name]
[Keboard type]
[Main Menu button]
[Advanced Search menu option]
[Advanced search suggestion
(nothing found)]
[Search button]
[Smart Search
Textbox selected]
[Show on the Map butto
(from
Find position of
Person office
Find position of POI
t»
on of
on POI's location
Person's officeFind position of Room
tion of
ding
«invokes»
«invokes»
WHAT HOW WHERE WHO WHEN WHY
Locations
Persons
Inventory
Documents
Reports
Maps
Plans
Points of
Interest
Infrastructure
Schedules
View location
or person data
Browse list of
locations
Search for
facility or
person
Browse map or
plan
Contact person
Show facility
position on
map
Report failure
or issue
Analyze
facility state
Order cleaning
services
Assign people
to space
Handle failure
or issue
notification
Inspect state of
infrastructure
or equipment
Repair or
Replace
infrastructure
or equipment
Handle failure
or issue
notification
On site office
spaces
On site outside
areas
On site
underground
areas
On site
experimental
areas
On site public
buildings
On site
cooperating
institutions
Off-site
locations
Mobile devices
PCs
Info-kiosks
Administration
Manager
Construction
Engineer
Quality
Assurance
Engineer
Safety
Engineer
Facility
Manager
Process
Enhancer
Planner &
Designer
Security Expert
Guest/Visitor
Summer
studies
Seminars /
Lectures /
Disputes
Guest events
Staff events
Begin of
construction
project
End of
construction
project
Begin of
maintenance
shutdown
End of
maintenance
shutdown
Better public
reception
Improved
internal
navigation and
communication
Easier
maintenance
and repairs
management
More efficient
space
utilization
Building
maintenance
costs reduction
Easy, fast and
accurate failure
reporting
Efficient
management of
safety
inspections

24. Server Application
«executionEnvironment»
Web Server
MapGuideLibraries
Extensions
Map Agent«Database Server»
Spatial Data Storage
MapGuideWebStudio
MapGuide AJAXViever
CustomViewer
b Tier
Client Tier
nate SystemLibrary
.
.
.
API
API
Search
Browse
Read
Navigate
Submit
Contact
Location
Person
Map
Plan
Equipment
Document
Failure Record
Schedlue
POI
Locate
Guest
Visitor
Organizationmember
(from Search)
«abstract»
Search Data
(from Search)
Search Location
(from Search)
Search Person
(from Search)
Search POI
Visitor
Organization
member
Search
Guest POI
Person
Location
«abstract»
Browse geodata as
images
«abstract»
Browse list of locable
elements
Browse List of
Locations
Browse List of POI
Browse Plan
Browse Map
GIS Casual Web Client
«abstract»
Browse Geodata
«abstract»
Search Geo and
Person Data
«abstract»
Find position of
Destination
«abstract»
Navigate to
Destination
«abstract»
Read Destination
Information
Submit Failure or
Issue Report
Visitor / Guest
Organization
Member
Destination - can be
person, facility or POI
Contact Person
«abstract»
Find route to
Destination
«extend»
Location
Person
Equipment
Document
Map
POI
Infrastructure
element
Schedule
FailureRecord
Plan
+FacilityUser
1
Issues
0..*
+SeminarRoom
1
1
+Caretaker
0..1
Takescareof
+Building
0..*
+Responsible
person
0..1
Isresponsiblefor
+Room
0..*
+Employee
0..1
Occupies
+Workstation
0..*
0..*
has
sublocation
1..*
0..*
1
Canbeviewedon
0..*
0..*
Affects
1..*
0..* Affects
1
0..*
Canbeviewedon
1..* 0..*
0..*
Canbeviewedon
0..*
1
Canbeviewedon
0..*
1
Canbeviewedon
+Area,
Building
0..*
Describes
0..*
Describes
1..*
0..*
Describes0..*
1..*
Canbeviewedon
+Floor,
Room
0..*
0..*
Islocatedin
0..*
Client side
Main Menu
GPS data
GPS NavigationModule
GPS data
Tree Browser
Map
QR data
QR Module
QR data
Core Module
Search Box
Action Menu
Locations
data
Locations Module
Locations
data
Person data
Person Module
Person data
FR data
Failure ReportModule
FR data
POI data
POI Module
POI data
Search Item
Server side
REST Services
POI
service Location
service
Person service
FR service
GPS service
QR service
Search Resuls
Person Information
Map with selected
Building
Smart Search
Autocomplete Results
Advanced Search
Foor plan with selected
Room
Header
Smart Search [Keboard type]
[Smart Search
Textbox selected]
[Search button]
[Advanced search suggestion
(nothing found)]
[Room name]
[Building name]
[Person name]
[Room name]
[Buildi
[Person name]
Guest/Visitor
(from Actors)
Tree Browser
Core
Map
Location
A
click()
nodeClicked(nodeData)
changeUrl(buildingId)
callController()
highlight(buildingId)
Facility Management
Services
Housekeeping
Services
Support Staff
Services
Property
Management
Services
Security Services Electromechanical
Services
And many more...
Search Resuls
Main Menu
Tree Browser
Map with selectedBuilding
Building Information
Smart Search
AutocompleteResultsAdvanced Search
Adjusted AdvancedSearch
Header
Smart Search
[Building name]
[Tree Browser menu option]
[Building name]
[Search Scope
select]
[Search button]
[Building name]
[Keboard type]
[Main Menu button]
[Advanced Search menu option]
[Advanced search suggestion
(nothing found)]
[Search button]
[Smart Search
Textbox selected]
[Show on the Map butto
(from
Find position of
Person office
Find position of POI
t»
on of
on POI's location
Person's officeFind position of Room
tion of
ding
«invokes»
«invokes»
WHAT HOW WHERE WHO WHEN WHY
Locations
Persons
Inventory
Documents
Reports
Maps
Plans
Points of
Interest
Infrastructure
Schedules
View location
or person data
Browse list of
locations
Search for
facility or
person
Browse map or
plan
Contact person
Show facility
position on
map
Report failure
or issue
Analyze
facility state
Order cleaning
services
Assign people
to space
Handle failure
or issue
notification
Inspect state of
infrastructure
or equipment
Repair or
Replace
infrastructure
or equipment
Handle failure
or issue
notification
On site office
spaces
On site outside
areas
On site
underground
areas
On site
experimental
areas
On site public
buildings
On site
cooperating
institutions
Off-site
locations
Mobile devices
PCs
Info-kiosks
Administration
Manager
Construction
Engineer
Quality
Assurance
Engineer
Safety
Engineer
Facility
Manager
Process
Enhancer
Planner &
Designer
Security Expert
Guest/Visitor
Summer
studies
Seminars /
Lectures /
Disputes
Guest events
Staff events
Begin of
construction
project
End of
construction
project
Begin of
maintenance
shutdown
End of
maintenance
shutdown
Better public
reception
Improved
internal
navigation and
communication
Easier
maintenance
and repairs
management
More efficient
space
utilization
Building
maintenance
costs reduction
Easy, fast and
accurate failure
reporting
Efficient
management of
safety
inspections

25. ...PLANOWANIE TO
PODSTAWA!
Pamiętaj o tym, że...

26. Legacy code!!!
SDD

27. Dokumentacja?

29. Twórcy?

31. ...SPIESZMY SIĘ KOCHAĆ
DEVÓW, TAK SZYBKO
ODCHODZĄ.
Pamiętaj o tym, że...

32. • GebäudeNummer
• Raumschlüssel
• BruttoNutzfläche
• Flächeneigentümer
Klucze
w ascii?

33. ...NALEŻY SZANOWAĆ SWÓJ
JĘZYK!
Pamiętaj o tym, że...

36. BESCHLEUNIGERKOMPONENTEN
LAGER

38. Spacja nie zawsze jest konieczna,
a ngFittext i overflow:hidden
to twói przyjaciele!
Pamiętaj o tym, że...

39. COŚ DLA MISTRZÓW SEO!

40. MEE
TUP
DESY

41. MEE
TUP
DESY

42. ...NIEMIECKIE RZECZOWNIKI
DOBRZE SIĘ POZYCJONUJĄ!
Pamiętaj o tym, że...

43. DRZEWKO
DAS
HAUPTLEISTUNGSPROBLE
M

45. PONAD 6000
WĘZŁÓW!

46. ng-repeat, ng-Filter!!!

47. Bindonce

48. jquery

49. ...CZASEM TRZEBA SCHOWAĆ
DUMĘ ANGULAR DEVELOPERA DO
KIESZENI!
Pamiętaj o tym, że...

50. Ciągle coś nie tak...

53. !!!

55. ...MAŁE NIE ZAWSZE CIESZY!
Pamiętaj o tym, że...

56. WARSTWY W
LEAFLECIE
Killing feathure!

58. A MOŻE BY TAK UPDATE?

59. Values 'f', '0', 'false', 'no', 'n', '[]' are no longer treated as falsy.

60. ...UPDATE PRZY DEPLOYMENCIE
JEST ZŁY
Pamiętaj o tym, że...

61. O czym warto pamiętać?
• Przygotuj się na muzealny kod
• Planowanie i analiza do podstawa
• Nie bój się pytać I dyskutować
• Polub niemiecki I pokochaj UTF8
• Niemcy to spoko ziomki
• Poznasz wielu wspaniałych ludzi
• Podróże kształcą
• Niemieckie kebaby są naprawdę pyszne!

63. KONIECZNIE SIĘ TAM
WYBIERZ!
Możesz jechać do desy?