Client-side Development 2016
131
April 23th, 2016 R. Jardim Botânico 518 2º andar Rio de Janeiro/ 55 21 35540 3540 / hugeinc.com
-
Upload
huge -
Category
Technology
-
view
1.017 -
download
0
Transcript of Client-side Development 2016
April 23th, 2016 R. Jardim Botânico 518 2º andar Rio de Janeiro/ 55 21 35540 3540 / hugeinc.com
Client-side Development 2016
Huge Brazil
April 23th, 2016
1. Background
2. One sentence 3. Premises4. Concepts 5. APIs 6. Frameworks
7. Conclusions
Agenda
Background.
Computers are there to satisfyour needs and automate tasks.The way we humans interactwith any system that automates tasks (not just computers, think of cars, for example) happensthrough an interface.
Before the internet became howwe know it, this interface was stablished by a software installedon your operating system.With the evolution of the weband the practicality of it, many have tried to bring all the power of computer systems to the web, through interfaces in the browser.
Client-side === SPA.
Or UniversalJS.
If you don’t need anycombination of:
AJAX, Binding, Interactivity and Input/Output.
You don’t need a SPA.
To not be a SPA is also Front-End,with its own challenges such asfiles/folders architecture, CSS
organization, smart templates, etc.
Going back toSingle Page Applications…
Technology x Tool.
Technology Tool
Javascript Angular
Node.JS Express
PHP Symphony
Python Flask
One sentence.
I want do develop applications without worrying too much about learning something beyond technology, with reusable parts, that is easy to maintain andbrings a good user experience.
Premises.
Not necessary to learnsomething too complex or specific.
Reusable and modular parts.
Without too muchneed of refactoring.
Brings a good user experience (fast, transitions, feedback,
easy to use).
Premises.1. Not necessary to learn somethingtoo complex or specific.2. Reusable and modular parts.3. Without too much need of refactoring.4. Brings a good user experience(fast, transitions, feedback, easy to use).
Challenges of 2016*.Premises.
Data synchronization between server and client/cache.
Performance.
Easy to develop/maintain.
Concurrency and Parallelism.
Offline.
Challenges. 1. Synchronize data between client and
server/cache.2. Performance.3. Easy to develop/maintain.4. Concurrency and Parallelism.5. Offline.
Time.Premises.
Time.1. Short term.2. Long term.
Not necessary to learn something too complex
Modular and reusable parts
Without too much need of refactoring
Good user experience (fast, transitions, feedback, easy to use)
Easy to develop/maintain.
Easy to develop/maintain.
Synchronize data between client and server/cache.
Offline.
Easy to develop/maintain.
Concurrency and Parallelism.
Performance.
Synchronize data between client and server/cache.
Short term Long term
Good user experience (fast, transitions, feedback, easy to use).
Good user experience (fast, transitions, feedback, easy to use).
Not necessary to learn somethingtoo complex.
Without too much need of refactoring.
Modular and reusable parts.
I want do develop applications without worrying too much about learning something beyond technology, with reusable parts, that is easy to maintain andbrings a good user experience.
We have to choose between.
1. Programming concepts.2. API formats.3. Front-End Frameworks.
Concepts.
You have seen around. 1. State.2. Stateless.3. Imperative.4. Functional.5. Passive.6. Reactive.
Imperative.1. Stateful.2. Passive.
Functional.1. Stateless.2. Reactive.
State.Concepts.
You are happy now, this is your state.
State is a memory snapshotof a program’s part, at some
point in time.
Imperative.Concepts.
This is the bossy style.
I know who you are, I want youto do something for me. I change
your state and I know that.
Passive.Concepts.
The same thing, but from the point of view of who receive orders.
He is passive of receiving orders and it is exposed to others.
Reactive.Concepts.
The opposite of imperative and passive, goes together
with functional.
He explicitly says that it will react when something
happens on others.
No one gives him direct orders, he owns and controls himself.
Functional.Concepts.
The mathematic style.
I define predictable functions,that just changes state from their own scope and never cause side effects (never change state out of
themselves).
Stateless.Concepts.
Also goes with functional.
Says that the best way to avoid side effects is to not hold state,
only transform and return.
Imperative.1. Stateful.2. Passive.
Functional.1. Stateless.2. Reactive.
Comparisons.Concepts.
APIs.
APIs.1. RPC.2. REST.3. GRAPH.
RPC.APIs.
example.com/list/?rowOffset=0&rowSize=5
Allows more than oneresource or entity per call.
RPC.1. Bad for caching.2. Coupled.3. One call per view.
4. Small responses.
REST.APIs.
example.com/list/1234 example.com/user/3
Each endpoint === one entity.
REST.1. Good for cache.2. Decoupled.3. Lots of calls per view.
4. Big responses.
GRAPH.APIs.
Dude.. just thinkabout a 360 degree’s JSON.
Take a look afterwards.1. Netflix Falcor.2. Facebook Relay/GraphQL.
Comparisons.APIs.
What about REST?
Frameworks.
Frameworks. 1. MV* (Angular 1.x, Ember...).2. Flux + Components (React, Vue.js…).3. Web Components (Polymer...).4. Functional/Reactive (Cycle, Bacon…).
Conclusions.
Easy to develop + Short term + Not having to learn something too specific?
Imperative + RPC + Flux/Components.
Data synchronization + Performance +Long term + Reusable parts?
Functional + GRAPH +Flux/Components or Functional/Reactive.
Ok cool.. so I need to know how to choose between all those stuff then.
Can our application beframework independent?
Lunar.Conclusions.
Separate framework-code from application-code.
Leave your business logic independent of tools.
We do need abstraction layers, but we always need to know where technology is and the role of each tool.
You can help.Conclusions.
You can help.1. Parallelism solutions.2. Propose ways of offline working.3. How to change between frameworks.4. Make client data model easier.5. Find a better way to use APIs and SPAs.
Questions?
April 23th, 2016. R. Jardim Botânico 518 2º andar Rio de Janeiro/ 55 21 35540 3540 / hugeinc.com
