Relax, it's spa time

Monica Rodrigues
Monica RodriguesSoftware Engineer at Farfetch | Event Organizer at Geek Girls Portugal | Participate on Netponto
Relax, it's SPA time
Mónica Rodrigues
http://netponto.org60ª Reunião Presencial - 19/03/2016
Who I am?
Mónica Rodrigues
Web development since 2010
HTML5, CSS3, AngularJs, Knockout, Asp.Net WebApi,
ASP.NET MVC, C#, SQL Server 2014
Member and Organizer
Degree in Computer Science Engineer at ISEL
Contents
• Challenge
• Solution
• Motivations vs Considerations
• Multiple page application vs SPA
• Multiple page application and SPA - Mix
• Some Javascript Frameworks
• SPA Samples
• What I need to begin
• Recomendations
• Javascript Patterns
• Demo
• References
First page – Long time ago
Today
Challenge
Users want a central place to view or take actions on
most or all content so they don’t have to waste time
navigating between pages.
Solution
Go to a SPA
Solution
Use modern web development techniques to build a
single-page app that doesn’t need to reload itself as
the user browses through it.
SPASingle Page Application
Motivations
Reach
Web app may be accessible on different platforms and devices
Responsive
Web app needs to be responsive to different screen
resolutions
Round trip
Web app does not require many round trips between client
and server
3R’s
Motivations
Better user experience
Separation of responsibilities between client and
server
Offline Applications
Considerations
The first time that the application loads is slow
Maintain Navigation, Deep linking and History
SEO (Search engine optimization) is complicated
Multiple Page Application
Page access
Returns
rendered page
Page
rendering
Single Page Application
Requests data
Returns data
DOM
processing and
manipulation
SPA and Multiple Page Application (Mix)
Products Page
Mini
SPA
Categories Page
Mini
SPA
Request data
Request data
Returns data
Returns data
Some Javascript
Frameworks and Libraries
SPA Samples
What I need to begin?
• Choose a framework or library
–Depends, what do you want to do?
• Choose a IDE and structure your folders
• Think about your application, namely
HTML structure and CSS.
• Lets start with Javascript 
–Don’t forget the best practices!!
Recomendations
• Best practices in Javascript
• Join and minify CSS files and Javascript
files
– Use a task runner – Gulp
• Learn MVVM pattern
App.js
App-users-controller.js
site.min.js
deploy
JavaScript Patterns
• Functions as abstractions
• Functions to build modules
• Functions to avoid global variables
Functions as abstractions
Functions to build modules
Revealing module
pattern
Functions to build modules
• What’s the matter with previous code?
– There are two global variables
• worker
• createWorker
These variables can be redefined in other files
Functions to avoid global variables
Reduce to 1
global
variable
But, how
can I get 0
global
variables?
Functions to avoid global variables
NetPonto Attendance Manager
SPA
Questions?
References
Angular Js
– https://angularjs.org/
Knockout
– http://knockoutjs.com/
Aurelia
– http://aurelia.io/
React
– https://facebook.github.io/react/
Backbone
– http://backbonejs.org/
Ember
– http://emberjs.com/
John Papa
– http://www.johnpapa.net/
Patrocinadores “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal
Patrocinadores “Silver”
Patrocinadores “Bronze”
http://bit.ly/netponto-aval-60
* Para quem não puder preencher durante a reunião,
iremos enviar um email com o link à tarde
Próximas reuniões presenciais
19/03/2016 – Lisboa
02/04/2016 – Porto
16/04/2016 – Lisboa
19/05/2016 – 21/05/2016 – TugaIT (Lisboa)
Reserva estes dias na agenda! :)
Thank you!
Mónica Rodrigues
Email: monica85rodrigues@gmail.com
Personal Website: http://fullhand.pt/
@Monica85Rodrig
https://pt.linkedin.com/in/monicascrodrigues
https://github.com/monica85rodrigues
https://github.com/monica85rodrigues/presentation-
netponto-spa
1 of 33

Recommended

Apply SOLID Design principles to javascript code with immediate function invo... by
Apply SOLID Design principles to javascript code with immediate function invo...Apply SOLID Design principles to javascript code with immediate function invo...
Apply SOLID Design principles to javascript code with immediate function invo...Anuradha Bandara
996 views14 slides
Inversion of Control in MVC by
Inversion of Control in MVCInversion of Control in MVC
Inversion of Control in MVCSunny Sharma
468 views21 slides
Solid principles by
Solid principlesSolid principles
Solid principlesMonica Rodrigues
13.6K views31 slides
Como tudo começou by
Como tudo começouComo tudo começou
Como tudo começouMonica Rodrigues
1.4K views94 slides
The Power Of SPA - ISCTE by
The Power Of SPA - ISCTEThe Power Of SPA - ISCTE
The Power Of SPA - ISCTEMonica Rodrigues
456 views18 slides
NoSQL and CouchDB by
NoSQL and CouchDBNoSQL and CouchDB
NoSQL and CouchDBJoão Cerdeira
1.2K views105 slides

More Related Content

Viewers also liked

SOLID Design principles by
SOLID Design principlesSOLID Design principles
SOLID Design principlesMohamed Sanaulla
3.5K views50 slides
SOLID PRINCIPLES by
SOLID PRINCIPLESSOLID PRINCIPLES
SOLID PRINCIPLESLuciano Queiroz
868 views98 slides
Modelos Mentais em 10 minutos by
Modelos Mentais em 10 minutosModelos Mentais em 10 minutos
Modelos Mentais em 10 minutosMonica Rodrigues
3.6K views11 slides
Refactoring Applications using SOLID Principles by
Refactoring Applications using SOLID PrinciplesRefactoring Applications using SOLID Principles
Refactoring Applications using SOLID PrinciplesSteven Smith
10.5K views56 slides
SOLID Design Principles by
SOLID Design PrinciplesSOLID Design Principles
SOLID Design PrinciplesAndreas Enbohm
18.7K views22 slides
The SOLID Principles Illustrated by Design Patterns by
The SOLID Principles Illustrated by Design PatternsThe SOLID Principles Illustrated by Design Patterns
The SOLID Principles Illustrated by Design PatternsHayim Makabee
21.5K views30 slides

Viewers also liked(6)

Refactoring Applications using SOLID Principles by Steven Smith
Refactoring Applications using SOLID PrinciplesRefactoring Applications using SOLID Principles
Refactoring Applications using SOLID Principles
Steven Smith10.5K views
SOLID Design Principles by Andreas Enbohm
SOLID Design PrinciplesSOLID Design Principles
SOLID Design Principles
Andreas Enbohm18.7K views
The SOLID Principles Illustrated by Design Patterns by Hayim Makabee
The SOLID Principles Illustrated by Design PatternsThe SOLID Principles Illustrated by Design Patterns
The SOLID Principles Illustrated by Design Patterns
Hayim Makabee21.5K views

Similar to Relax, it's spa time

Java vs javascript (XPages) by
Java vs javascript (XPages)Java vs javascript (XPages)
Java vs javascript (XPages)Andrew Barickman
1.5K views31 slides
Develop a vanilla.js spa you and your customers will love by
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveChris Love
2.1K views32 slides
Angular JS - Introduction by
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
2.4K views26 slides
Single Page Applications: Your Browser is the OS! by
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Jeremy Likness
4.9K views39 slides
Developing the unknown by
Developing the unknownDeveloping the unknown
Developing the unknownpaul22blue
249 views10 slides
End to-End SPA Development Using ASP.NET and AngularJS by
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSGil Fink
2.9K views60 slides

Similar to Relax, it's spa time(20)

Develop a vanilla.js spa you and your customers will love by Chris Love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
Chris Love2.1K views
Angular JS - Introduction by Sagar Acharya
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
Sagar Acharya2.4K views
Single Page Applications: Your Browser is the OS! by Jeremy Likness
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
Jeremy Likness4.9K views
Developing the unknown by paul22blue
Developing the unknownDeveloping the unknown
Developing the unknown
paul22blue249 views
End to-End SPA Development Using ASP.NET and AngularJS by Gil Fink
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJS
Gil Fink2.9K views
Angular JS, A dive to concepts by Abhishek Sur
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur523 views
web development course | web development training in Pune India by Continued Learning
web development course | web development training in Pune Indiaweb development course | web development training in Pune India
web development course | web development training in Pune India
Continued Learning396 views
Web development Course, Web development training, Learn With Continued-Learning by continuedlearning
Web development Course, Web development training, Learn With Continued-LearningWeb development Course, Web development training, Learn With Continued-Learning
Web development Course, Web development training, Learn With Continued-Learning
continuedlearning211 views
web -development- course - Continued - Learning by Continued Learning
web -development- course - Continued - Learningweb -development- course - Continued - Learning
web -development- course - Continued - Learning
Continued Learning189 views
Introduction To Single Page Application by KMS Technology
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
KMS Technology10.9K views
Learning Single page Application chapter 1 by Puguh Rismadi
Learning Single page Application chapter 1Learning Single page Application chapter 1
Learning Single page Application chapter 1
Puguh Rismadi684 views
Pearls and Must-Have Tools for the Modern Web / .NET Developer by Ofer Zelig
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Ofer Zelig1K views
Optimus XPages: An Explosion of Techniques and Best Practices by Teamstudio
Optimus XPages: An Explosion of Techniques and Best PracticesOptimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best Practices
Teamstudio3.4K views
Introduction to AngularJS by Subba Tanniru
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Subba Tanniru200 views
Mvc presentation by MaslowB
Mvc presentationMvc presentation
Mvc presentation
MaslowB906 views
Internship softwaretraining@ijse by Jinadi Rashmika
Internship softwaretraining@ijseInternship softwaretraining@ijse
Internship softwaretraining@ijse
Jinadi Rashmika181 views

Recently uploaded

CryptoBotsAI by
CryptoBotsAICryptoBotsAI
CryptoBotsAIchandureddyvadala199
42 views5 slides
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...ShapeBlue
164 views13 slides
The Role of Patterns in the Era of Large Language Models by
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language ModelsYunyao Li
91 views65 slides
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue by
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueCloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueShapeBlue
139 views15 slides
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlueShapeBlue
152 views23 slides
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...ShapeBlue
178 views15 slides

Recently uploaded(20)

Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue164 views
The Role of Patterns in the Era of Large Language Models by Yunyao Li
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language Models
Yunyao Li91 views
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue by ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueCloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
ShapeBlue139 views
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
ShapeBlue152 views
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue178 views
Transcript: Redefining the book supply chain: A glimpse into the future - Tec... by BookNet Canada
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
BookNet Canada41 views
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by Priyanka Aash
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOs
Priyanka Aash162 views
"Package management in monorepos", Zoltan Kochan by Fwdays
"Package management in monorepos", Zoltan Kochan"Package management in monorepos", Zoltan Kochan
"Package management in monorepos", Zoltan Kochan
Fwdays34 views
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti... by ShapeBlue
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
ShapeBlue141 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays58 views
Future of AR - Facebook Presentation by Rob McCarty
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
Rob McCarty65 views
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... by ShapeBlue
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
ShapeBlue108 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue224 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue265 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue137 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue247 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu437 views

Relax, it's spa time

Editor's Notes

  1. Telerik Ndepend Pluralsight syncfusion
  2. Para quem puder ir preenchendo, assim não chateio mais logo  É importante para recebermos nós feedback, e para darmos feedback aos nossos oradores http://goqr.me/