7

FRAMEWORKSQUETORNAM
MAISRÁPI
DOODESENVOLVI
MENTO
DESOFTWARES
Sumár
io

I
ntr
oduç
ão.
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..03

1.
Spr
ingboot.
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..04

2.
Boot
str
ap.
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..05

3.Cor
dova.
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..06

4.Angul
ar.
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
.07

5.Reac
t..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..08

6.
Ioni
c..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..09

7.
Mat
eri
alDes
ign.
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..10

Conc
lus
ão.
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
.11

Asi
magensei
lus
traç
õesdes
teebookf
oram of
ici
alment
eadqui
ri
dasnosbanc
osdef
otosShut
ter
stoc
k,Pexel
seFr
eepi
k.Todososdi
rei
toss
ãopr
oveni
ent
esdosmes
mos
.
I
ntr
odução
Osf
ramewor
ksr
epr
esent
am umadasf
err
ament
asmai
s
i
mpor
tant
espar
aosdes
envol
vedor
esdeapl
icações
.

El
esaj
udam aenc
aps
ularasf
unc
ional
idadesdeal
toní
velc
om
mai
oragi
li
dadeeef
ici
ênc
ia,ec
onomi
zandogr
andepar
tedo
t
emponot
rabal
ho.

Masvoc
êsabequai
ssãoospr
inc
ipai
sfr
amewor
ksexi
stent
es?

Li
stamososmai
simpor
tant
es,
bas
eadosnaac
eit
açãoeut
il
iz
a-
ç
ãopel
ospr
ofi
ssi
onai
s.

Conf
ira!

03
 Par
aquem vaides
envol
verum J
avaSc
riptc
om es
saar
qui
-
1
.SPRI
NGBOOT t
etur
a,porexempl
o,t
eráumaboaf
err
ament
aem mãos
,
poi
sof
erec
eumaampl
agamadef
unc
ional
idadesCRUD
(
Creat
e,Read,Updat
e,Del
ete)
.

Asvant
agensdoSpr
ingboots
ãoqueel
ejádef
ineuma
s
éri
edec
onvenç
õesdedes
envol
viment
oet
odosc
onhe-
c
em bem c
omoosobj
etoss
ãonomeadoseor
gani
zados
OSpr
ingbootéaevol
uçãodof
ramewor
kSpr
ing.Apes
ar
naar
qui
tet
ura.
deexi
sti
rháum bom t
empoes
erf
amos
oent
reosde-
s
envol
vedor
es,s
ua evol
ução o dei
xou um pouco
Émai
sut
il
izadonapar
tedebac
k-enddel
inguagensem
compl
exo.
J
avaSc
riptei
ndi
cadopar
aquem vaides
envol
verum s
is-
t
emawebdot
ipoREST(
Repr
esent
ati
onalSt
ateTr
ans
fer
),
Agor
a,par
adef
ini
rum s
ist
ema,em vezdevoc
êes
crever
quevi
sadi
sponi
bil
izaraosus
uár
iosi
nfor
maç
õesar
maz
e-
di
ver
sosmi
niar
qui
vosem XMLno pr
ojet
o,deveat
uar
nadasnos
eubanc
odedadosoubac
k-endpar
afac
ili
tara
di
ret
ament
enasanot
açõesr
eal
izadasdent
rodoc
ódi
go-
c
riaç
ãodeapl
icaç
õesdi
rec
ionadasaqual
quert
ipodedi
s-
-
f e.
ont
pos
iti
vo(
weboumobi
le)
.

Tr
ata-
sedeum f
ramewor
kMVC(
Model
-Vi
ew-
Cont
rol
ler
).
Es
semodel
odear
qui
tet
urat
em porobj
eti
vos
epar
aras
r
epr
esent
ações das i
nfor
maç
ões do us
uár
io quando
i
nter
agec
om el
as.

04
 Ous
eja,ames
mac
ois
avi
staouf
eit
aem um c
elul
arpode
2.BOOTSTRAP s
err
etr
ans
mit
idaem um t
abl
et,c
omput
adoroumoni
tor
deTV.Voc
êdef
ineasr
egr
asnas
uai
nter
fac
eeel
avai
s
abers
e adapt
araut
omat
icament
e a es
sest
amanhos
di
fer
ent
es.

O Boot
str
apéum f
ramewor
kmai
sdi
reci
onadopar
ao
as
pect
ovi
sualdasapl
icações
.

El
etem opoderdeenc
aps
ulardi
ver
sasf
unc
ional
idades
deCSS(
Cas
cadi
ngSt
yleSheet
s)que,j
unt
as,vãoc
ont
ri-
bui
rpar
aac
riaç
ãodeumapági
naboni
taec
om f
unc
iona-
l
idades padr
oni
zadas
. Como t
em um apel
o vi
sual
f
ort
e,t
orna-
sei
ntui
ti
vo,dei
xandoqual
querdes
envol
ve-
doràvont
adees
egur
onopr
oces
sodec
riaç
ão.

Émai
sindi
cado par
atr
abal
hosno HTML5equevi
sam
agr
egarr
espons
ivi
dadeàsi
nter
fac
es,dei
xandoaspági
-
nasadapt
ávei
saqual
quert
amanhodet
eladedi
spos
iti
-
vo.Tudo i
ssos
em c
ompr
omet
erasf
unc
ional
idades
,a
es
trut
uraeol
ayoutdoapl
icat
ivo.

05
 Par
afac
ili
tarai
ndamai
s,nos
itedoCor
dovaépos
sível
en-
3.CORDOVA c
ont
rarbi
bli
otec
asdec
ódi
gospr
ont
os.Af
inal
,apes
ardas
par
tic
ular
idadesdec
adamar
caemodel
odedi
spos
iti
vo,
exi
stem f
unc
ional
idadespadr
õesec
omunsent
reel
es,o
quet
ornaoac
ess
oigualem di
ver
sosapar
elhos
.

Funç
õesc
omol
igarac
âmer
aeac
ionaroGPS,porexem-
pl
o,c
ost
umam t
erc
ódi
goss
emel
hant
esent
reosdi
spos
i-
OCor
dovat
em comoobj
eti
vos
impl
if
icarepadr
oni
zaro
t
ivoseaat
ivaç
ãodes
sesr
ecur
sosac
abas
endoi
gualpar
a
des
envol
viment
odeapl
icaçõeshí
bri
daspar
amobi
le.
t
odos
.Quandohouverc
ódi
gosem c
omum ent
reosapa-
r
elhos
,oCor
dovamos
trar
áem s
uabi
bli
otec
a,per
mit
in-
Comoosc
ódi
gosnat
ivosdei
OSeAndr
oids
ãobem di
fe-
doos
euus
o.
r
ent
es,of
ramewor
kat
uac
ompi
landoet
raduz
indouma
l
inguagem deHTML5,porexempl
o,par
aal
inguagem do
Ent
reaspr
inc
ipai
svant
agens
,oCor
dovas
edes
tac
apor
s
ist
ema oper
aci
onalut
il
izado no c
elul
ar.As
sim,a s
ua
i
mpul
sionarapr
odut
ivi
dade,umavezqueapenasuma
apl
icaç
ãopodef
unc
ionardames
maf
ormaem qual
quer
es
trut
uradec
ódi
gospar
amúl
ti
plaspl
ataf
ormaspodes
er
di
spos
iti
vo.
c
riadaapar
tirdeum bl
ocodenot
as.Tudos
em anec
ess
i-
dade de pr
ofi
ssi
onai
ses
pec
ial
izadose har
dwar
espar
a
Porexempl
o:s
e voc
ê des
ejarc
riaruma apl
icaç
ão que
c
adapl
ataf
orma.Al
ém di
sso,ger
aapl
icat
ivosapt
ospar
a
s
eja hí
bri
da e r
ode em di
ver
sosc
elul
ares
,us
aro f
ra-
s
erem publ
icadosnasAppsSt
ores
.
mewor
kopen s
our
cedo Cor
dovas
eráumaal
ter
nat
iva
ef
ici
ent
e,j
á que el
e é exc
lus
ivo par
acr
iaç
õesdo t
ipo
mobi
le.

06
 PRI
NCI
PAI
SDI
RETI
VASDO ANGULAR:
4.
ANGULAR
app–Dec
ng- lar
aum el
ement
ocomooel
ement
orai
zdaapl
icaç
ão,
oc
asi
onandoamudanç
adoc
ompor
tament
opadr
ãodat
ag.

ng-
bind–Mudaot
ext
odeum el
ement
oHTMLaut
omat
icament
e,de
ac
ordoc
om os
eur
esul
tado,vi
ndodasr
egr
asdenegóc
io.

ng-
model–És
imi
laraong-
bind,
masper
mit
eli
gaç
ãodi
ret
abi
dir
eci
o-
nal(
two-
waydat
abi
ndi
ng)ent
reavi
ew eoes
copodoapl
icat
ivo.
Di
fer
ent
ement
e dosf
ramewor
ksdi
scut
idosant
eri
or-
ng-
clas
s–Per
mit
eat
ribut
osdec
las
ses
erem c
arr
egadosdi
nami
ca-
ment
e,oAngul
aréut
ili
zadoes
peci
alment
epar
afaz
era ment
e.
l
igaçãoent
reof
ront
-endeoback-
endem webedes
k-
ng-
cli
ck–Per
mit
eins
tanc
iaroevent
odec
lic
k,s
emel
hant
eaoonc
lic
k.
t
op.
ng-
cont
rol
ler–Es
pec
ifi
caum c
ont
rol
lerJ
avaSc
riptpar
aaquel
eHTML
em ques
tão.
El
eper
mit
eac
riaç
ãodeum model
odeapl
icaç
ãobas
eado
ng-
repeat–I
nst
anc
iaum el
ement
opori
tem deum ar
ray.
em Si
ngl
ePageAppl
icat
ion(
apl
icaç
ãodepági
naúni
ca)r
e-
ng-
show e ng-
hide – Mos
tra ou es
conde um el
ement
o HTML de
pr
esent
adopel
asi
glaSPA. ac
ordoc
om or
esul
tadodeumaexpr
ess
ãobool
eana.

ng-
swi
tch–I
nst
anc
iaum t
empl
ate,em umal
ist
adees
col
has
,depen-
Nes
semodel
odeapl
icaç
ão,odes
envol
vedort
razpar
ao dendodoval
orobt
idopel
aexpr
ess
ão.
br
ows
erumai
magem,c
omos
efos
seumavi
sãodobac
k- ng-
view –Adi
ret
ivabas
epar
amani
pul
açãoder
otas
,res
olvendoum
-
end,
ondeous
uár
iovait
rabal
har
.Oangul
arf
azc
om que J
SON ant
esder
ender
izarosmodel
osac
ionadosporc
ont
rol
ador
es

apági
nat
rabal
hedef
ormaaut
omát
ica,c
om um model
o es
pec
ifi
cados
.

pr
ópr
iodef
ini
do.Ger
alment
e,es
sef
ramewor
kémai
sut
i- ng-
if–Dec
lar
açãobás
icadeum '
if
'queper
mit
emos
trarum el
emen-

l
izadopar
apr
ojet
osem HTML5. t
oseac
ondi
çãof
orver
dadei
ra.

07
 O Reac
tes
tás
endo us
ado noss
itesda Net
fii
x,I
mgur
,
5.REACT Feedl
y,Ai
rbnb,Seat
Geek,Hel
loSi
gn,Wal
mar
teout
ros
.

UM "
OLÁMUNDO"EM REACTPODERI
ASERASSI
M:

O Reactéumabi
bli
otecadeJ
avaScr
iptmui
tout
ili
zada ReactDOM.render(
pel
osdes
envol
vedor
espar
acr
iari
nter
facesdeus
uár
io. <h1>Hello, world!</h1>,
document.getElementById('root')
I
ssoc
orr
espondeavi
sual
izaraspági
nasnopadr
ãoMo- );
del
-Vi
ew-
Cont
rol
ler(
MVC)e s
erus
ado em c
ombi
naç
ão
c
om out
rasbi
bli
otec
asdeJ
avaSc
riptouf
ramewor
ksno
MVC,c
omooAngul
ar.

El
eper
mit
ecr
iarapl
icaç
õesdegr
andepor
tepar
adi
ver
-
s
asf
inal
idadesnaweb,
tendof
lexi
bil
idadepar
amudarao
l
ongodot
empoc
om f
aci
li
dade.Des
tina-
sepr
inc
ipal
men-
t
eaent
regarvel
oci
dade,s
impl
ici
dadeees
cal
abi
li
dadeà
pr
oduç
ãodeapl
icaç
ões
.

08
6.I
ONI
C

OI
oni
céum f
ramewor
kcompl
eto(
SDK— Sof
twar
eDe-
vel
opmentKi
ts)de códi
go aber
to ut
ili
zado pr
inci
pal
-
ment
epar
ao des
envol
viment
o deapl
icat
ivosmóvei
s
hí
bri
dos
.

El
efor
nec
efer
rament
aser
ecur
sosdedes
envol
viment
o
bas
eadosem t
ecnol
ogi
asda Web,c
omo CSS,HTML5e
Sas
s.

Seudi
fer
enc
ialéaf
err
ament
adec
ons
truç
ãodei
nter
fac
e
queées
trut
uradanomododear
ras
tares
olt
ar,
tor
nando
ot
rabal
ho mui
to mai
sint
uit
ivo.Depoi
sdepr
ont
as,as
apl
icaç
õespodem s
erdi
str
ibuí
dasporAppsSt
oresde
apl
icat
ivosnat
ivospar
aser
em bai
xadosei
nst
aladosem
qual
querdi
spos
iti
vo.

09
7
.MATERI
ALDESI
GN

Em 2014,oGoogl
elançouum f
ramewor
kchamadoMa-
t
eri
alDes
ign.

Tr
ata-
se de uma evol
ução f
eit
a em c
ima do Boot
str
ap
par
a apr
esent
arum vi
sualpadr
ão do Googl
e,f
icando
mai
sli
mpoeor
gani
zado.

Par
aquem j
áes
táac
ost
umadoat
rabal
harc
om oGmai
le
Googl
e Dr
ive,porexempl
o,s
eident
ifi
car
áfac
ilment
e
c
om of
ramewor
k,oquepodeagr
adarmui
tosdes
envol
-
vedor
es.O obj
eti
vodoMat
eri
alDes
ignét
ornarapági
na
mai
sli
mpaef
áci
ldes
erc
ompr
eendi
danobr
ows
er.

1
0
CONCLUSÃO
Todos es
ses f
ramewor
ks podem s
erneces
sár
ios em
cadadi
fer
ent
eet
apadodes
envol
viment
odaapl
icação,
t
ornandodi
fí
cilger
enci
arot
rabal
hoeaument
andoo
t
empot
otaldepr
odução. Agor
aquevoc
êconhec
eospr
inc
ipai
sfr
amewor
ksut
il
iza-
dosnodes
envol
viment
odeapl
icaç
ões
,quet
alc
onhec
er
Tal
vezvoc
ênãos
aiba,masexi
steumapl
ataf
ormaque apl
ataf
ormaCr
onapp?
pos
sibi
li
taquevoc
êus
etodosel
es,oquepodemel
hor
ar
osní
vei
sdepr
odut
ivi
dade.Com i
sso,voc
ênão pr
eci
sa Ac
ess
e:www.
cronapp.
io
nem c
onhec
erc
adaf
ramewor
kem par
tic
ular
,poi
stem
t
udooquenec
ess
itapar
acr
iarapl
icaç
õesem apenasum Li
nksút
eis
:
uni
coambi
ent
e,s
em s
epr
eoc
uparem al
ter
narent
reas
opç
õesmanual
ment
e. ht
tps
://
spr
ing.
io/
ht
tps
://
get
boot
str
ap.
com/
E não é s
óis
so,c
aso apar
eça al
gum novo f
ramewor
k ht
tps
://
cor
dova.
apac
he.
org/
mel
horemai
spr
odut
ivonomer
cado,
apl
ataf
ormas
een- ht
tps
://
angul
arj
s.or
g/
c
arr
egadeat
ual
izar
,adi
cionarous
ubs
tit
uirof
ramewor
k ht
tps
://
reac
tjs
.or
g/
par
agar
ant
irs
empr
eamai
orpr
odut
ivi
dadenapl
ataf
or- ht
tps
://
ioni
cfr
amewor
k.c
om/
ma. ht
tps
://
mat
eri
al.
io/

1
1