Single Page ApplicationsMónica Rodrigues

26/05/2017

Who am I?

26/05/2017Single Page Applications Mónica Rodrigues

Mónica Rodrigues

Degree in Computer Science Engineer at ISEL

Software Engineer since 2010

Keywords: Web Applications, ASP.NET MVC, ASP.NET Web Api, REST, Javascript,

Angular, Best practices, Design patterns, Clean Code, SQL Server

Contents

26/05/2017Single Page Applications Mónica Rodrigues

What is SPA?

Motivations / Considerations

Multiple Page Applications vs Single Page Applications

Frameworks Javascript / SPA Samples

What I need to begin?

Best practices / Recommendations

First page – Long time ago

26/05/2017Single Page Applications Mónica Rodrigues

Today

26/05/2017Single Page Applications Mónica Rodrigues

Challenge

26/05/2017Single Page Applications Mónica Rodrigues

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

26/05/2017Single Page Applications Mónica Rodrigues

Go to a SPA

Solution

26/05/2017Single Page Applications Mónica Rodrigues

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

26/05/2017Single Page Applications Mónica Rodrigues

ReachWeb app may be accessible on different platforms and devices

Round tripWeb app not require many round trips between client and server

Better user experience

Separation of responsibilities between client and server

Considerations

26/05/2017Single Page Applications Mónica Rodrigues

The first time that the application loads is slow

Maintain Navigation, Deep linking and History

SEO (Search engine optimization) is complicated

Multiple page application

26/05/2017Single Page Applications Mónica Rodrigues

Page access

Returns

rendered page

Page

rendering

Single page application

26/05/2017Single Page Applications Mónica Rodrigues

Requests data

Returns data

DOM processing

and

manipulation

SPA and Multiple Page Application (Mix)

26/05/2017Single Page Applications Mónica Rodrigues

Products Page

Mini SPA

Categories Page

Mini SPA

Request Data

Request Data

Response Data

Response Data

Some Javascript Frameworks and Libraries

26/05/2017Single Page Applications Mónica Rodrigues

SPA Samples

26/05/2017Single Page Applications Mónica Rodrigues

What I need to begin?

26/05/2017Single Page Applications Mónica Rodrigues

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

26/05/2017Single Page Applications Mónica Rodrigues

Best practices in Javascript

Join and minify CSS files and Javascript files

Use a task runner like Gulp

Learn MVVM pattern

App.js

App-users-controller.js

site.min.js

Javascript Patterns

26/05/2017Single Page Applications Mónica Rodrigues

Functions as abstractions

Functions to build modules

Functions to avoid global variables

Functions as abstractions

26/05/2017Single Page Applications Mónica Rodrigues

Functions to build modules

26/05/2017Single Page Applications Mónica Rodrigues

Revealing module

pattern

Functions to build modules

26/05/2017Single Page Applications Mónica Rodrigues

What’s the matter with previous code?

There are two global variables

worker

createWorker

There variables can be redefined in other files

Functions to avoid global variables

26/05/2017Single Page Applications Mónica Rodrigues

Reduce to 1 global

variable

But, how can I get 0global variables?

Functions to avoid global variables

26/05/2017Single Page Applications Mónica Rodrigues

Thank You!

26/05/2017Single Page Applications Mónica Rodrigues

Mónica Rodrigues

Email: monica85rodrigues@gmail.com

Blog: http://mrodiguesblog.azurewebsites.net/

@Monica85Rodrig

https://pt.linkedin.com/in/monicascrodrigues

https://github.com/monica85rodrigues