I nd o ne s ia n J o urna l o f   E lect rica l En g ineering   a nd   Co m pu t er   Science   Vo l.   24 ,   No .   2 N o v em b e r   2 0 2 1 ,   p p .   9 7 8 ~ 9 8 5   I SS N:  2 5 0 2 - 4 7 5 2 ,   DOI : 1 0 . 1 1 5 9 1 /ijeecs.v 24 .i 2 . pp 978 - 9 8 5          978       J o ur na l ho m ep a g e h ttp : //ij ee cs.ia esco r e. co m   M o dern   too ls   a nd   curren t   trends   in   web - dev elo pmen t       Deba ni   P ra s ha d   M is hra 1 ,   K s hiro d   K um a r   Ro ut 2 ,   Su re nd er   Reddy   Sa lk uti 3   1, 2 De p a rtme n t   of   El e c tri c a l   En g in e e rin g ,   I n tern a ti o n a I n stit u te o I n fo rm a ti o n   Tec h n o l o g y   (IIIT )   Bh u b a n e sw a r ,   G o th a p a tn a ,   In d ia   3 De p a rtme n t   of   Ra il ro a d   a n d   El e c tri c a l   En g in e e rin g ,   W o o s o n g   Un i v e rsity ,   Da e jeo n ,   Re p u b li c   of   K o r e a       Art icle   I nfo     AB S T RAC T   A r ticle   his to r y:   R ec eiv ed   J a n   7 ,   2 0 2 1   R ev is ed   Sep   7 ,   2 0 2 1   Acc ep ted   Sep   16 ,   2 0 2 1       In   th is   p a p e r,   a   so c ial   m e d ia   p lat fo rm   li k e   Li n k e d In   a n d   F a c e b o o k   is   m a d e   u sin g   M o n g o DB   as   a   d a tab a se .   T h is   p a p e r   a ims   to   to u c h   a ll   th e   m o d e rn   to o ls   re q u ired   to   m a k e   an   e fficie n t   we b   a p p ,   k e e p in g   in   m in d   b o th   th e   c u sto m e r   sa ti sfa c ti o n   a n d   t h e   e a se   fo r   th e   d e v e lo p e rs   to   m a k e   t h e ir   we b   d e sig n s,   fr o n t - e n d   a n d   b a c k - e n d .   In   th is   a p p li c a ti o n ,   a   u se r   c o u ld   m a k e   an   a c c o u n t,   a d d   or   d e lete   d e tails   of   t h e ir   p r o fil e ,   e d u c a ti o n ,   a n d   e x p e rien c e   field s.   Th e   u se rs   c o u ld   p o st,   a ls o   c o m m e n t   a n d   e v e n   li k e   a   p o st   of   o th e r   u se rs.   A   m o n o li th ic   a rc h it e c tu ra l   a p p r o a c h   is   u se d   f o r   sim p li c it y   in   m a in tain in g   th e   d a tab a se .   P o stm a n   a p p li c a ti o n   p ro g ra m m in g   in terfa c e   ( API )   wa s   u se d   to   c h e c k   t h e   wo rk i n g   of   t h e   b a c k - e n d .   G it ,   G it h u b ,   a n d   He ro k u   we re   u se d   to   d e p lo y   t h e   we b site.   No d e   p a c k a g e   m a n a g e r   ( NPM )   p a c k a g e s   li k e   b c ry p t   a n d   v a li d a to r   a re   u se d   to   e n c ry p t   p a ss wo rd s   a n d   to   v a li d a te   a   u se r   d u ri n g   l o g in .   M e d ia   q u e ries   a re   u se d   in   c a sc a d in g   sty le  sh e e ts  ( CS S )   to   a c h iev e   a   re sp o n si v e   d e sig n .   T h e re fo re ,   t h e   u se rs   c o u l d   v iew   th e   we b site   t h ro u g h   a   m o b il e   p h o n e ,   i - p a d   a n d   a lso   a   p e rso n a c o m p u ter  ( PC ) ,   m a in tai n in g   t h e   re a d a b il it y   a n d   d e sig n   a c ro ss   a ll   th e se   d e v ice s.     K ey w o r d s :   Ad o b e   Xd   Mo n g o DB   No d ejs   R ea ctjs   R ed u x   SC S S   T h is   is   an   o p e n   a c c e ss   a rticle   u n d e r   th e   CC   BY - SA   li c e n se .     C o r r e s p o nd ing   A uth o r :   Su r en d er   R ed d y   Salk u ti   Dep ar tm en t   of   R ail r o ad   an d   E lectr ical   E n g in ee r in g   W o o s o n g   Un iv er s ity   J ay an g - d o n g ,   D o n g - gu,   D ae jeo n - 3 4 6 0 6 ,   R ep u b lic   of   Ko r ea   E m ail:   s u r en d er @ wsu . ac . k r       1.   I NT RO D UCT I O N     Si n ce   th e   19 9 0 s ,   af ter   th e   i n tr o d u ctio n   of   th e   wo r ld   wid w eb   ( WWW )   [ 1 ] ,   by   T im   B er n er s   L ee ,   a   B r itis h   s cien ti s t.   W h ich   was   u s ed   to   co m m u n icate ,   b etwe en   s cien tis t s   f r o m   all   ar o u n d   th e   wo r ld .   An d   at   th at   tim e,   t im   h ad   wr itten   th e   th r ee   f u n d a m en tal   tech n o lo g ies   of   a   web ,   wh ich   r em ain   as   th e   f o u n d atio n :   h y p e r tex t   m ar k u p   lan g u ag e   ( HT ML [ 2 ] ,   u n if o r m   r eso u r ce   id e n tifie r   ( UR I an d   h y p er te x tr an s f e r   p r o t o co ( HT T P ) .   Fo llo wed   by   m an y   lan g u ag es   s u ch   as   ca s ca d in g   s ty le  s h ee t s   ( C S S )   [ 3 ] ,   jav a,   h y p er tex p r ep r o ce s s o r   ( PHP ) ,   J av aScr ip t   [ 4 ] ,   Py th o n ,   s tr u ctu r ed   q u er y   lan g u ag ( SQL ) ,   A n g u lar ,   an d   m an y   m o r e   we r e   i n tr o d u ce d   o v er   th e   y ea r s   to   im p lem en t   we b   tech n o lo g y ;   k ee p in g   in   m in d   b o th   web   s ec u r ity   is s u es   an d   th e   e ase   to   p r o g r am m er s   in   th e   p r o g r am m in g   lan g u a g e.   T o d ay ,   f o r   an y   web   ap p licati o n   th e   3   b u ild in g   b lo ck   co d in g   lan g u ag es   r eq u ir ed   ar e   HT ML ,   C SS ,   an d   J av aScr ip t.   An d   n o wad ay s ,   u s er   in te r f ac e/ u s er   ex p er ie n ce   ( UI /UX d esig n   is   eq u ally   g iv en   im p o r tan ce ,   w h ich   in v o l v es   th e   ex ten s iv e   u s e   of   HT ML   an d   C SS .     B ein g   a   web   d e v elo p er ,   th e   ter m s   m o n o lith ic   an d   m icr o - s er v ices   ar ch itectu r e   [5 ] ,   [ 6]   m u s t   be   f am iliar .   W h at   a   m o n o lith ic   a p p licatio n   m ea n s   is   th at   t h e   a p p licatio n   h as   its   au th en ticati o n ,   p o s ts ,   p r o f iles ,   d atab ase,   an d   s er v er s   all   in   o n e   p lace .   In   th e   ca s e   of   a   m icr o - s er v ice   ap p licatio n ,   its   p o s t   s ec tio n   is   s ep ar ately   a   d if f er en t   ap p licatio n ,   s im ilar ly ,   th e   au th en ticatio n   is   an o th e r   ap p licatio n   an d   th e   p r o f ile.   An   ap p licatio n   with   m o n o lith ic   ar ch itectu r e   is   d ep en d en t   on   all   its   p ar ts   if   one   of   th e   s ec tio n s ,   f o r   e x am p le,   th e   au th en ticatio n   Evaluation Warning : The document was created with Spire.PDF for Python.
I n d o n esian   J   E lec  E n g   &   C o m p   Sci     I SS N:  2502 - 4 7 5 2       Mo d ern   to o ls   a n d   cu r r en t tren d s   in   w eb - d ev elo p men t   ( Deb a n i P r a s h a d   Mis h r a )   979   s y s tem   of   th at   a p p licatio n   f ailed   due   to   s o m e   er r o r   th e   en tir e   ap p licatio n   w o u ld   be   d is r u p ted .   T h is   is   not   th e   ca s e   with   a   m icr o - s er v ice   ar c h itectu r e.   Fig u r e   1   d ep icts   th e   f l o w   ch ar t   of   th ese   ar ch itectu r es .   If   one   of   th e   ap p licatio n s   in   m icr o - s er v ice   f ails   it   wo u ld n ' t   af f ec t   o th er   ap p licatio n s   with in   th e   ap p licatio n .   As   in   th e   p r ev io u s   ex am p le   if   th e   au th en ticatio n   h as   an   er r o r ,   th e n   all   o th er   r o u tes   leav in g   th e   au th en ticated   r o u tes   can   be   a cc ess ed ,   wh ich   is   in   co n tr ast   to   a   m o n o lith ic   ar c h itectu r e.   B ec au s e   all   th es e   au th en ticatio n ,   p o s ts ,   an d   p r o f iles   s er v ices   r esid e   in   th eir   s er v er .   An d   c o n n ec tiv ity   is   p r o v id ed   to   all   th ese   s er v ices   th r o u g h   an   ev e n t   b u s ,   it’s   a   co m m o n   p ip elin e   of   d ata   to   all   s er v ices.   Fo r   ex am p le,   if   a   u s er   is   au th en ticated ,   th e   a u th en ticat io n   s er v ice   g iv es   th is   in f o r m atio n   to   th e   ev e n t   bus   an d   f r o m   h er e   all   o th er   ap p licatio n   r ec eiv es   th is   u p d a te,   an d   ac c o r d in g ly   th e   s er v ices   p r o v id es   p r o tecte d   r o u tes.   T h e   ad v a n tag e   of   u s in g   a   m icr o - s er v ice   is   th e   s ca le - ab ilit y   an d   im p r o v em e n ts   ap p lied   to   its   s er v ice   r ath er   th an   th e   e n tire   ap p licatio n   as   in   th e   ca s e   in   t h e   ca s e   of   a   m o n o lith ic   ar ch it ec tu r e.   A   m icr o - s er v ices   ar c h i tectu r e   is   ac h iev ed   th r o u g h   Ku b er n etes.   H o wev er ,   wh en   k ee p i n g   t h e   tim e   f r am e   in   m i n d ,   a   m o n o lith ic   a r ch ite ctu r e   co u ld   be   b u ilt   f aster   th an   a   m icr o - s er v ice   ar ch itectu r e.   An d   also   due   to   th e   n u m b er   of   p eo p le   in v o lv ed   in   h an d lin g   th e   d atab ase   in   th e   in itial   s tag e   w o u ld   be   less ,   a   m icr o - s er v ice   a p p licatio n   b ec o m es   ted io u s   in   th is   ca s e.   Fig u r e   2   s h o ws   th e   ap p licatio n   of   jest .              Fig u r e   1.   Mo n o lith ic   an d   m icr o - s er v ices   ar ch itectu r e   c o m p ar is o n           Fig u r 2 .   T esti n g   a n   ap p licatio n   u s in g   J est   1   Su cc ess   an d   1   Fail   T est f u n ctio n   Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 5 0 2 - 4 7 5 2   I n d o n esian   J   E lec  E n g   &   C o m p   Sci,   Vo l.  24 ,   No .   2 No v em b er   2 0 2 1 9 7 8   -   985   980   F o r   an   a p p l i c a t i o n   a p a r t   f r o m   t h e   s e l e c t i o n   of   t h e   d a t a b a s e   a r c h i t e c t u r e ,   it   is   a l s o   i m p o r t a n t   t h a t   we   t e s t   our   a p p l i c a t i o n s   w o r k i n g .   J e s t   a n d   M o c h a   a r e   t h e   t w o   p o p u l a r   J a v a S c r i p t   t e s t i n g   f r a m e w o r k s .   J e s t   is   a   c o m p a r a t i v e l y   m u c h   more   u s e r - f r i e n d l y   f r a m e w o r k   t h a n   o t h e r   f r a m e w o r k s   [ 7 ] ,   [ 8 ] .   A n d   j e s t   l i b r a r y   is   s p e c i f i c   to   N o d e   a p p l i c a t i o n s .   T h e   l a t e s t   v e r s i o n   of   j e s t   is   2 6 . 6 .   W h i l e   i n s t a l l i n g   t h e   l a t e s t   j e s t ,   u s e   n p m   i   j e s t @ 2 6 . 6 . 0 -- s a v e - d e v ,   a n d   we   w a n t   to   s a v e   j e s t   as   a   d e p e n d e n c y   l o c a l l y   i n t o   o u r   m a c h i n e   so   t h a t   we   c o u l d   t e s t   it   l o c a l l y   b e f o r e   t h e   p r o d u c t i o n   s t a g e   of   our   a p p l i c a t i o n .   A   f u n c t i o n   t e s t ( " S u c c e s s " , ( ) = > { } )   f o r   p a s s   in   j e s t   a n d   a   f u n c t i o n   t e s t ( " F a i l " , ( ) = > { t h r o w   n e w   E r r o r ( F a i l ) ; } )   to   c h e c k   f a i l e d   c o n d i t i o n   in   j e s t .   T h e   f u n c t i o n   t e s t   ()   is   g l o b a l l y   d e f i n e d   in   t h e   j e s t   l i b r a r y ,   so   we   c o u l d   u s e   it   a n y w h e r e   in   our   a p p l i c a t i o n   to   t e s t   t h e   v a r i o u s   r o u t e s   a n d   f u n c t i o n   o p e r a t i o n s .   T h i s   w o r k   is   to   d e m o n s t r a t e   a n d   a w a r e   t h e   r e a d e r s   of   t h e   p r e s e n t   t o o l s   t h a t   a r e   r e q u i r e d   to   b e c o m e   an   e f f i c i e n t   web - d e v e l o p e r .   E f f i c i e n t   m e a n i n g   t h a t   t h e   c u r r e n t   r e q u i r e m e n t   in   W e b - T e c h   is   f u l f i l l e d ,   a l o n g   w i t h   t h e   d e v e l o p e r   t o o l s   t h a t   a r e   r e q u i r e d   f o r   t h e   d e v e l o p e r s   to   e a s e   t h e i r   w o r k f l o w .   H e r e ,   a   s o c i a l   m e d i a   p l a t f o r m   l i k e   L i n k e d I n   a n d   F a c e b o o k   is   m a d e   u s i n g   M o n g o D B   as   a   d a t a b a s e .   A d o b e   Xd   is   u s e d   f o r   UX   d e s i g n i n g   [ 9 ] - [ 1 2 ] .   A d o b e   Xd   is   a   u s e r - f r i e n d l y   s o f t w a r e   w h e r e   we   c o u l d   m a k e   t h e   p r o t o t y p e   of   our   a p p l i c a t i o n s   U I .   F o r   an   a p p l i c a t i o n ,   we   c a n t   j u s t   b l i n d l y   s t a r t   c o d i n g   t h e   C S S   a n d   R e a c t   p a r t   w i t h o u t   h a v i n g   a   p l a n   of   w h a t   t h e   a p p l i c a t i o n   m u s t   l o o k   l i k e .   T h i s   is   w h e n   we   u s e   A d o b e   X d .   T h e   UI   d e s i g n   w a s   w r i t t e n   in   S C S S   [ 1 3 ] - [ 1 5 ] ,   a n d   t h e n   c o m p i l e   to   C S S   u s i n g   t h e   s y n t a c t i c a l l y   a w e s o m e   s t y l e   s h e e t   ( S C S S n p m   p a c k a g e s .   A n d   F i r e f o x   p r o v i d e s   a   C S S   e n v i r o n m e n t   t h a t   is   u s e r - f r i e n d l y   as   w e l l   in   b u i l d i n g   t h e   U I .   R e a c t   is   u s e d   to   r e n d e r   e n t i r e   a p p l i c a t i o n s   f r o n t - e n d .     S i n c e   t h e   a p p l i c a t i o n   w a s   s t i l l   in   i t s   d e v e l o p m e n t   m o d e l ,   a   m o n o l i t h i c   a r c h i t e c t u r a l   a p p r o a c h   w a s   b e e n   u s e d .   M o r e o v e r ,   f o r   s t a r t - u p s   a   m o n o l i t h i c   d a t a b a s e   is   p r e f e r a b l e .   A   m i c r o - s e r v i c e   a r c h i t e c t u r e   can   be   u s e d   w h e n   t h e   b u s i n e s s   e x p a n d s .   A n d   a l s o   t e s t i n g   of   an   a p p l i c a t i o n   as   t h e   a p p l i c a t i o n   g r o w s   is   e q u a l l y   i m p o r t a n t ,   it   c a n   be   a c h i e v e d   t h r o u g h   s e t t i n g   up   an   a u t o m a t e d   t e s t i n g   a p p l i c a t i o n   l i k e   j e s t .   P o s t m a n   A P I   was   u s e d   to   c h e c k   t h e   w o r k i n g   of   t h e   b a c k - e n d   s e r v e r   a n d   R E S T   A P I s .   G i t ,   G i t h u b ,   a n d   H e r o k u   w e r e   u s e d   to   d e p l o y   t h e   w e b s i t e .   N P M   p a c k a g e s   l i k e   b c r y p t   a n d   v a l i d a t o r   a r e   u s e d   to   e n c r y p t   p a s s w o r d s   a n d   to   v a l i d a t e   a   u s e r   d u r i n g   l o g i n .         2.   RE S E ARCH   M E T H O DS   T h is   s ec tio n   co n tain s   b r ief   in tr o d u ctio n   to   all  th cu r r e n tl y   f o llo wed   tr en d s   in   web   d ev elo p m en t.   T h p r esen w o r k   is   to   d em o n s tr ate  an d   awa r th e   r ea d e r s   o f   th p r esen to o ls   th at  a r r eq u ir ed   to   b ec o m e   an   ef f icien web - d ev elo p er .   E f f ic ien m ea n in g   th at   th e   cu r r en r eq u ir em e n in   W eb - T ec h   is   f u lf illed ,   alo n g   with   th d ev elo p er   to o ls   th at  ar r eq u ir ed   f o r   th d ev elo p e r s   to   ea s th eir   wo r k f lo w.   Her e,   th d escr ip tin   an d   th im p o r tan ce   o f   Mo n g o DB /No n - SQL  J SON,   Mo n g o o s e,   No d e. j s   an d   R ea ct. j s   ar p r esen ted .   An   ex p lan atio n   as  to   wh y   th ese  tr en d s   ar p r e f er r ed   th m o s t a r also   m e n tio n e d   in   th is   s ec tio n .     2 . 1 .      M o ng o DB /No n - SQ L   J SO N   t y pe   da t a   as   a   da t a ba s e   Fo r   an y   ap p licatio n   t o d ay ,   it   m u s t   be   ac ce s s ib le   to   its   u s er s   as   q u ick ly   as   p o s s ib le.   T h e   ac ce s s ib ilit y   of   an   a p p licatio n   is   m o s t   cr u c ial   an d   also   o n e   of   t h e   m ai n   d ec id in g   f ac to r s   of   a   cu s to m e r s   s atis f ac tio n .   An d   f r o m   th e   b u s in ess   p o in t   of   v iew,   one   r e q u ir es   to   s ca le   th eir   a p p licatio n   to   r ea c h   more   cu s to m er s .   So ,   th er e   is   a   n ee d   f o r   a   d atab ase   th at   co u l d   h an d le   m u ltip le   u s er s   ( m illi o n s   of   u s er s ) .   T h e   tr ad itio n al   r elatio n al  d atab ase  m an ag ed   s y s tem   ( R DB MS ),   wh ich   u s es   s tr u ctu r ed   q u er y   la n g u ag e   ( SQL )   h as   its   lim itatio n s   wh en   it   co m es   to   h an d lin g   huge   v o lu m es   of   d at a.   T h e   tim e   co m p lex ity   in v o lv ed   in   p r o ce s s in g   d ata   in   SQL   is   s ig n if ican tly   h ig h   as   th e   n u m b e r   of   c u s to m er s   in cr ea s e.   In   1998   C a r l o   S t r o z z i   g a v e   an   i n t r o d u c t i o n   to   a   non - r e l a t i o n a l   t y p e   of   d a t a   m a n a g e m e n t   s y s t e m   w h i c h   he   c a l l e d   N o S Q L .   W h e r e   t h e   d a t a   d o e s   n o t   c o n t a i n   a   f i x e d   s c h e m a ,   u n l i k e   R D B M S ,   a n d   s t o r e s   d a t a   in   J a v a S c r i p t   o b j e c t   n o t a t i o n   f o r m a t   ( J S O N )   a n d   not   in   t a b l e s ,   w h i c h   m a k e s   N o S Q L   m o r e   f l e x i b l e .   M o r e o v e r ,   in   s u c h   s y s t e m s   r a t h e r   t h a n   t h e   p r e v i o u s l y   u s e d   n o r m a l i z e d   d a t a b a s e ,   t h e s e   s y s t e m s   u s e   t h e   m o d e r n   d e n o r m a l i z e d   d a t a b a s e s ,   w h e r e   t h e   d a t a   c a n   be   q u e r i e d   at   a   m u c h   f a s t e r   r a t e .   C u r r e n t l y ,   t h e   m o s t   p r e f e r r e d   d a t a b a s e   m a n a g e m e n t   s y s t e m   u s e d   e x t e n s i v e l y   is   M o n g o D B   [ 1 6 ] - [ 1 8 ] .   It   u s e s   j s o n   f o r m a t   f o r   d a t a   s t o r a g e   a n d   is   a   non - S Q L   t y p e   of   d a t a b a s e   s y s t e m .     In   [ 1 6 ] ,   an   a n a l y s i s   of   M y S Q L   a n d   M o n g o D B   is   m a d e .   M y S Q L   u s e s   an   R D B M S   t y p e   d a t a b a s e   m a n a g e m e n t   s y s t e m   a n d   M o n g o D B   is   a   No - S Q L   d a t a   m a n a g e m e n t   s y s t e m   as   d i s c u s s e d   a b o v e .   B o t h   M y S Q L   a n d   M o n g o D B   a r e   t h e   t o p   c o m p a n i e s   in   t h e i r   r e s p e c t i v e   d a t a b a s e   m a n a g e m e n t   s e r v i c e s .   S o ,   i t s   a p t   to   c o m p a r e   R D B M S   a n d   non - R D B M S   t e c h n o l o g i e s   u s i n g   t h e s e   s e r v i c e   p r o v i d e r s .   A   t o t a l   of   t h r e e   t e s t s   w e r e   m a d e   in   [ 1 6 ] .   T h e   t e s t   w a s   f o r   a l l   o p e r a t i o n s ,   i n s e r t i o n ,   u p d a t e ,   a n d   d e l e t i o n   of   d a t a .   In   t h e   1 s t   t e s t ,   500   u s e r s   w e r e   c r e a t e d ,   500   i n d i v i d u a l   o r d e r s   w e r e   c r e a t e d   a n d   500   i t e m s   w e r e   c r e a t e d .   T h e   w o r s t - c a s e   f o r   M o n g o D B   is   0 . 0 4 7 4   s e c o n d s   a n d   f o r   M y S Q L ,   it   w a s   0 . 7 9 5 4   s e c o n d s .   In   t h e   2nd   t e s t ,   1000   u s e r s   w e r e   c r e a t e d ,   1000   u s e r s   p a t c h / p u t   r e q u e s t s   to   e d i t   d a t a ,   t h e   w o r s t - c a s e   t i m e   f o r   M o n g o D B   is   2 . 3 2 0 1   s e c o n d s   a n d   f o r   M y S Q L ,   it   w a s   9 3 . 0 1 5 3   s e c o n d s .   T h e   3 r d   a n d   t h e   l a s t   t e s t   c o n d u c t e d   h a d   7 , 0 0 0   u s e r s   c r e a t i o n   a n d   1 0 , 0 0 0   u s e r s   u p d a t e   ( p u t / p a t c h   r e q u e s t   to   e d i t ) ,   t h e   w o r s t   c a s e   in   M o n g o D B   is   2 3 . 3 4 2 7   s e c o n d s   a n d   t h a t   of   M y S Q L   w a s   a   w h o p p i n g   3 2 4 . 7 6 5 4   s e c o n d s   in   t h e   w o r s t   c a s e .   T h r o u g h   t h e   o b s e r v a t i o n s ,   it   c a n   be   s e e n   c l e a r l y   t h a t   as   t h e   n u m b e r   of   d a t a   i n c r e a s e s   an   R D B M S   s y s t e m   t a k e s   an   e x p o n e n t i a l l y   h i g h e r   a m o u n t   of   t i m e   in   p e r f o r m i n g   t h e   c r e a t e ,   r e a d ,   u p d a t e   a n d   d e l e t e   ( C R U D )   o p e r a t i o n s .     Evaluation Warning : The document was created with Spire.PDF for Python.
I n d o n esian   J   E lec  E n g   &   C o m p   Sci     I SS N:  2502 - 4 7 5 2       Mo d ern   to o ls   a n d   cu r r en t tren d s   in   w eb - d ev elo p men t   ( Deb a n i P r a s h a d   Mis h r a )   981   2 . 2 .      M o ng o o s e   A   Mo n g o DB   co llectio n   is   q u er ied   by   an   o b ject  d ata  m ap p er   ( ODM ).   An   ODM   is   an   o b ject   ass o ciate d   with   a   non - SQL   d a tab ase.   As   th e   n am e   s u g g ests ,   an   ODM   m ap s   a   d o c u m en t - r elate d   m o d u le.   An d   one   of   t h e   f ea tu r es   of   an   OD M   is   th at   it   as s ig n s   a   u n iq u e   Ob jectI d   to   all   its   d ata   in   th e   Mo n g o DB   d atab ase.   Hen ce ,   th ese   o b jectid s   co u ld   be   u s ed   later   to   f etch   all   th e   d ata   s to r ed   with   r esp ec t   to   th at   p ar ticu lar   I d .   Fo r   th e   p u r p o s e   of   q u er y in g   th e   Mo n g o DB   d atab ase,   an   ODM   lib r ar y   ca lled   M o n g o o s e   [ 1 9 ] - [ 2 1 ]   is   u s ed   in   b o t h   Mo n g o DB   an d   No d eJs .   It   m a n ag es   d ata   r elatio n s h ip s ,   p r o v i d es   s ch em a   v alid atio n s ,   a n d   is   u s ed   in   M o n g o DB   to   tr an s late   b etwe en   o b jects   in   co d e   a n d   to   r ep r esen t   th o s e   o b jects.   W h ile   m ak in g   a   m o n g o o s e   m o d el   o n e   m u s t   f o llo w   ce r tain   r u les.   A   Mo n g o o s e   m o d el   f u n ctio n   m u s t   h av e   a   n am e   an d   a   s ch em a   t h at   en f o r ce s   th e   ty p e   of   d ata   th at   ca n   be   r e f er r ed   to   be   ac ce s s ed   a n d   m an ip u lated .   T h e   d ata   s tr u ctu r e   is   d e f in ed   f o r   a   m o d el   by   th e   Mo n g o o s e   s ch em a.   T h e   m o d el   f ea tu r e   p r o v id es   an   in ter f a ce   f o r   in te r ac tin g   with   th e   d o cu m en t   in f o r m atio n   s to r ed   at   Mo n g o DB .   T h e   f o llo win g   ex am p le   s h o ws   a   s ch em a   f o r   a   u s er   m o d el,   wh ich   h as   a   n am e,   e m ail,   an d   p ass wo r d   as   its   attr ib u tes.   An d   all   of   th e m   ar e   of   ty p e   s tr in g ,   an d   th e   r eq u ir ed   k ey wo r d   is   ca lled   a   v alid ato r   in   Mo n g o o s e.   I t’ s   a   f ea tu r e   th at   v alid ates   a   u s er   b ased   on   t h eir   n am e   an d   p ass wo r d .     2 . 3 .      N o de. j s   No d e. js   (n o d e)   is   a   s er v er - s id e   J av aScr ip t   en v ir o n m en t   [ 2 2 ] - [ 2 4 ] .   It   u s es   Go o g le' s   o p en - s o u r ce   V8   en g in e   as   its   d ef au lt   J av aScr i p t   en g in e   wh ich   ex ec u tes   th e   J av aScr ip t   co d e.   B o th   V8   an d   n o d ar e   m o s tly   wr itten   in   C / C ++ ,   co n ce n tr atin g   on   p r o d u ctiv ity   a n d   lo w   m em o r y   u s ag e.   B u t,   th e   p u r p o s e   of   a   V8   is   to   s u p p o r t   J av aScr ip t   in   th e   b r o wser   ( Go o g le   C h r o m e   b r o wser ) ,   a n d   t h at   of   n o d e   is   to   r u n   a   s er v er   p r o ce s s .   No d e. js   is   an   asy n c h r o n o u s   I / O   ev en tin g   m o d el.   As   J av aScr ip t   is   an   asy n c h r o n o u s   lan g u a g e,   so   d o es   n o d e .   A   s in g le   th r ea d   is   u s ed   to   h an d le   m u ltip le   r eq u ests .   W h at   th is   m ea n s   is   th at   all   t he   r eq u ests   a r e   ac ce s s ed ,   an d   th e   lo n g est   r eq u est   is   ex ec u te d   last .   B eh in d   t h e   s ce n e,   th e   l o n g e s t   r eq u est   is   r u n n in g   in   th e   b a ck g r o u n d   wh ile   th e   o th er   r eq u ests   ar e   ex ec u ted   an d   h av e   b ee n   s er v e d   at   th e   s am e   tim e,   u s in g   th e   asy n c   an d   a wait   k ey wo r d s .   T h is   is   in   co n tr ast   to   a   s y n c h r o n o u s   ar ch itectu r e   wh er e   a   r e q u est   is   s er v ed   one   at   a   tim e,   so   u n til   an   o n g o in g   r eq u est   is   not   y et   s er v e d   all   o th er   in c o m in g   r eq u ests   ar e   t em p o r ar ily   put   to   a   h alt.   An d   th is   ex p lain s   wh y   Mo n g o DB   is   m u ch   f aster   th a n   My SQL.   An   R DB MS   s y s tem   is   s y n ch r o n o u s ,   wh ich   m a k es   it   s lo wer .   An d   th is   b ec o m es   m o r e   n o ticea b le   as   th e   n u m b e r   of   u s er   in cr ea s e.   In   a   b u s in ess   m ak in g   y o u r   cu s to m er s   wait   is   u n d esira b le.   So   in   o r d e r   to   o v er co m e   th is   is s u e,   we   m u s t   in cr ea s e   th e   n u m b e r   of   th r ea d s ,   so   th at   more   u s er s   co u ld   ac ce s s   a   r eq u est.   Fo r   more   th r ea d s   to   be   av ailab le   more   h ar d war e   is   r eq u ir e d .   T h is   is   th e   m ajo r   d is ad v an tag e   of   s y n c h r o n o u s   ar ch itectu r e.   In   ca s e   th e   n u m b er   of   u s er s   in cr ea s ed   in   an   e x p o n e n tial   m an n er ,   we   r eq u ir e   m u ch   m o r e   h ar d w ar e   to   av ail   th e   th r ea d s .   T h is   is   not   ec o n o m ical.   T h is   is   wh e r e   an   asy n ch r o n o u s   ar ch itectu r e   lik e   No d e. js   alo n g   with   Mo n g o DB   b ec o m es   a   b ig   ad v an tag e.   In   [ 2 4 ]   a   p e r f o r m an ce   an aly s is   is   m ad e   on   No d e   a n d   c o m p ar e d   with   an   in ter n et  i n f o r m atio n   s er v ices  ( IIS )   s er v e r .   Acc o r d in g   to   th e   r esu lts   th ey   ac h iev ed ,   No d e   is   m o s t   p r ef e r ab le   f o r   an   I /O   in ten s iv e   a p p li ca tio n .       2 . 4 .      Re a ct . j s   T h e   t w o   p o p u l a r   J a v a Sc r i p t   f r am e w o r k s   u s e d   f o r   f r o n t - e n d   d ev e l o p m e n t   at   p r es e n t   a r e   R e a ct   [ 2 5 ] ,   [ 26]   an d   An g u lar   [ 2 7 ] .   An g u lar   is   m ain tain ed   by   th e   Go o g le   c o m m u n ity   a n d   R ea ct   is   d ev el o p ed   by   Face b o o k .   B o th   ar e   o p en   s o u r ce   f r a m e wo r k s   an d   th ese   h elp   th e   d ev elo p er s   in   m ak in g   s in g le - p ag e   ap p licatio n s .   Yo u T u b e,   Pay Pal,   W alm ar t,   an d   G - m ail   u s e   An g u lar .   A n d   R ea ct   is   u s ed   in   Face b o o k ,   I n s tag r a m ,   an d   W h atsap p .   In   [ 2 8 ] ,   [ 2 9 ] ,   a   co m p ar is o n   of   R ea ct   with   An g u lar   is   m ad e.   An g u lar   u s es   r ea l   d o cu m en o b ject  m o d el  ( DOM )   wh er ea s   R ea ct   u s es   v ir tu al   DOM .   A   v ir tu al   DOM   is   lig h tweig h t   an d   f aster   th an   a   r ea l   DOM   s in ce ,   in   a   r ea l   DOM ,   a   s m all   ch an g e   in   th e   s tatu s   of   th e   DO M   wo u ld   ca u s e   a   re - r en d e r in g   of   th e   en tire   DOM   in   An g u lar ,   th is   is   not   th e   ca s e   in   R ea ct.   T h in k   ab o u t   th e   c o n d itio n   wh e r e   th e   DOM   h as   a   lar g e   n u m b er   of   d ata   to   be   r en d er e d ,   in   th is   ca s e,   a   s m all   ch an g e   in   DOM   ca u s in g   an   en tire   re - r e n d er i n g   of   th e   DOM   is   u n d esira b le.   A   v ir tu al   DOM   on   t h e   co n tr ar y   o n l y   re - r en d er s   th at   ce r tain   b lo c k /co m p o n en t   th at   h as   b ee n   u p d ated ,   w h ich   m ak es   R ea ct   m u ch   f aster   th a n   An g u la r   in   DOM   r en d er in g   a p p licatio n s .   On e   more   a d v an tag e   in   R ea ct   is   th at,   u n lik e   An g u lar   wh ich   u s es   a   T wo - way   d ata   b in d in g ,   R ea ct   u s es   a   o n e - way   d ata - b in d in g   u s in g   th e   s to r e   wh er e   all   th e   d ata   to   be   r e n d er e d   to   th e   f r o n t - en d   is   cr ea ted   a n d   th er e   is   an   ac tio n   an d   ev e n t   d is p atch er ,   d etails   of   wh ich   wo u ld   be   e x p lain ed   in   th e   n ex t   s ec tio n .   On e   way   d ata   f l o w/b in d in g   g iv es   a   b etter   u n d er s tan d i n g   an d   co n tr o l   o v e r   th e   d ata.       3.   RE SU L T S   AND   D I SCU SS I O N   In   th is   s ec tio n ,   th e   s tep - by - s tep   ap p r o ac h   u s ed   to   b u ild   th i s   p r o ject   is   ex p lain ed .   T h r o u g h o u t   t h is   wo r k ,   v is u al  s tu d io   c o d was   u s ed   as   th e   c o d e   e d ito r .   I t’ s   u s er - f r ien d ly ,   s im p le   to   u s e   a n d   it   co m es   with   m an y   ex ten s io n s   lik e   em m et,   p r ettier ,   b r ac k et   p air   co lo r izer ,   a u to   r en am e   tag ,   liv e   s er v er ,   an d   m an y   m o r e   ex ten s io n s   wh ich   h elp   in   d etec tin g   b r ac k et   p air s ,   d etec tin g   an   er r o r ,   an d   also   to   d e p lo y   a   lo ca l   s er v er .   Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 5 0 2 - 4 7 5 2   I n d o n esian   J   E lec  E n g   &   C o m p   Sci,   Vo l.  24 ,   No .   2 No v em b er   2 0 2 1 9 7 8   -   985   982   3 . 1 .      Cre a t ing   a   M o ng o o s e   s chem a   T h e   v ar io u s   m o n g o o s e   s ch e m a   u s ed   wer e   u s er   s ch em a,   p r o f ile   s ch em a   an d   p o s t   s ch em a.   User   s ch em a   h ad   th e   n a m e,   em ail,   p ass wo r d ,   an d   d ate   of   cr ea ti o n   as   attr ib u tes.   Pr o f ile   s ch e m a   h ad   attr ib u tes:   co m p an y ,   web s ite,   lo ca tio n ,   s k ills ,   ex p er ien ce   an d   ed u ca tio n .   So   th at   each   u s er   c o u ld   d o cu m e n t   th eir   j o b   s tatu s ,   wh ich   co m p an y   th ey r e   wo r k in g   in ,   th eir   s k ills ,   th eir   ex p er ien ce ,   an d   ed u ca tio n .   Po s t   s ch em a   h ad   attr ib u tes:   tex t,   n am e,   lik es,   c o m m en ts ,   an d   d ate.   L ik es   an d   co m m e n ts   wer e   also   u s ed   to   p o p u late   u s er s   to   k ee p   a   r ec o r d   of   all   th e   u s er s   wh o   lik ed   or   co m m e n ted   on   a   g iv en   p o s t.   No w   in   th e   Mo n g o DB   clo u d   d atab ase   th e   th r ee   f o ld er s ,   one   of   th e   u s er ,   s ec o n d   of   th e   p r o f ile,   an d   t h e   th ir d   of   p o s ts   wo u ld   be   m a d e.   Fig u r e   3   s h o ws   th e   th r ee   co llectio n   f o ld e r s   b e en   m ad e   in   th e   Mo n g o DB   clo u d ,   o n e   f o r   u s er s ,   th e   s ec o n d   f o r   p r o f iles ,   an d   t h e   th ir d   f o r   p o s ts .           Fig u r e   3.   Mo n g o DB   co llectio n       3 . 2 .      Rest   AP I   T h r ee   r o u tes   f o r   cr ea tio n   ( p o s t   r eq u est),   one   f o r   u s er ,   s ec o n d   f o r   p r o f iles ,   an d   th e   t h ir d   f o r   p o s ts ,   wer e   cr ea ted .   On e   r o u te   is   c r e ated   to   au th e n ticate   th e   u s er   so   th at   a   u s er   co u ld   en ter   th eir   em ail   an d   p ass wo r d   an d   th en   th ey   co u l d   g iv e   a   p o s t   r eq u est   to   cr ea te   an d   d elete   a   p o s o r   p r o f ile .   T h e   p r o f ile  an d   p o s r o u tes   also   h ad   a   g et   r eq u est   to   r ea d   th e   d ata   of   o th er   u s er s   p o s ts   an d   p r o f iles .   An d   J SON   web   to k en s   ( J W T )   wer e   u s ed   to   au th en ticate   th e   u s er s   wh ile   lo g g in g   in .   On ly   au th en ticated   u s er s   co u ld   ac ce s s   th e   r o u tes .   Po s tm an   API   was   u s ed   to   ch ec k   th e   wo r k in g   of   R E ST   API .   W h en   a   u s er   is   lo g g ed   in ,   a   JWT   is   cr ea ted   f o r   th at   u s er .     No w   u s in g   th is   JWT   th ey   co u ld   ac ce s s   all   th e   p r o tecte d   r o u tes.   B u t   th e   JWT   h as   an   ex p ir in g   tim e   wh ich   is   s et   to   3 6 0 0   s ec o n d s   or   1   h o u r ,   af te r   wh ic h   th e   cu r r en t   g en er ated   JWT   b ec o m es   in v alid .   Af ter   th e   ex p ir in g   tim e   of   3 6 0 0   s ec o n d s ,   th e   u s er   n ee d s   to   lo g in   o n ce   ag ain   in   o r d er   to   cr ea te   a   n ew   v alid   JWT   to   ac ce s s   th e   r o u tes.   F ig u r e   4   d ep icts   th e   u s er   is   lo g g ed   in ,   a   n ew   JWT   is   cr ea ted   an d   th e   r o u tes   ar e   ac ce s s ed   s u cc ess f u lly   with   th is   n ew   J W T .           Fig u r e   4.   Valid   J W T   an d   r esp o n s e   f r o m   th e   b ac k en d   a n d   d atab ase     Evaluation Warning : The document was created with Spire.PDF for Python.
I n d o n esian   J   E lec  E n g   &   C o m p   Sci     I SS N:  2502 - 4 7 5 2       Mo d ern   to o ls   a n d   cu r r en t tren d s   in   w eb - d ev elo p men t   ( Deb a n i P r a s h a d   Mis h r a )   983   3 . 3 .       F ro nt - end   A   f r o n t - e n d   of   a   W eb - ap p   is   th e   web   d esig n   an d   th e   clien t - s id e   r en d e r in g   of   we b   co n ten t.   T h is   in clu d es   th e   C SS   wh ich   is   th e   UI   p ar t   an d   r ea ctjs   wh ich   in v o lv es   r en d er in g   th e   co n te n t.   So ,   th e   g o al   h er e   is   to   r en d er   th e   d ata   at   n o d em o n   s e r v er   ( b ac k en d - s er v er )   to   th e   n o d e   s er v er   or   clien t - s er v e r   so   th at   th e   u s er s   co u ld   v iew   p o s ts ,   co m m en ts   an d   p r o f iles   in   r ea l - tim e .   To   ac h iev e   th at   b o th   th e   s er v er s   ar e   to   be   ac tiv ated   s im u ltan eo u s ly .   A   NPM  p ac k ag e   co n c u r r e n tly   was   d ep lo y ed ,   so   th at   we   d o n t   h av e   to   r u n   n o d em o n   an d   clien t - s er v er   s ep ar ately   in s tea d   with   a   s in g le   co m m a n d   b o t h   of   th em   wo u l d   be   ac tiv ated .   T h is   s ec tio n   will   be   d ea lin g   with   to o ls   th at   ar e   r eq u ir ed   f o r   f r o n t - en d   d ev elo p m en t.   No w   to   th e   b ac k en d   w h ile   r eq u esti n g   ax io s ,   we   m ak e   a   p r o x y :   "p r o x y ":   h ttp ://l o ca lh o s t:P O R T .   So   th at   we   co u ld   m a k e   an   ax io s . g et/ p o s t/d elete   m eth o d   d ir ec tly   to   o u r   b ac k - en d   r o u te s .   Ax io s   is   a   clien t - s id e   HT T P   s er v ice   with in   R ea ct   an d   A n g u lar ,   it   is   u s ed   to   co n n ec t   th e   f r o n t - en d   r eq u ests   to   th e   b ac k - en d .       3 . 3 . 1 .   UI/ UX   des ig n   Fo r   an y   W eb   ap p licatio n ,   its   in ter f ac e   an d   d esig n   p lay   an   im p o r tan t   r o le   in   b u s in ess ,   b ec au s e   it   d ir ec tly   r ef lects   a   cu s to m er s   u s ag e.   Mo r e   th e   c u s to m er s   ar e   s atis f ied ,   it   h elp s   in   g r o win g   your   b u s in ess ,   you   g et   m u ch   m o r e   cu s to m er s .   K ee p in g   th is   in   m in d ,   it’s   h ar d   to   s tr aig h t   away   s tar t   d esig n in g   th e   UI   with o u t   h av in g   a   f ee l   of   how   o u r   a p p l icatio n   wo u ld   lo o k   lik e   to   o u r   cu s to m er s .   T h is   is   wh er e   a   n ee d   f o r   UX   ar is es.   T h e   m o s t   p o p u lar   to o l   f o r   U X/UI   d esig n in g   in   Ad o b e   X D.   I t’ s   u s er - f r ien d l y   with   m a n y   f ea tu r es   an d   is   av ailab le   f o r   b o th   m ac OS   an d   W in d o ws.   T h e   p ar t   th at   an y   w eb   d esig n er   wo u l d   lik e   ab o u t   th is   s o f twar e   is   th at   it   g iv es   a   f ee l   of   th e   ap p licatio n   we   in ten d   to   m ak e,   a   f u n ctio n al   ap p licatio n ,   an d   d esig n .   So   a   d ev elo p e r   co u ld   m ak e   a   r o u g h   s k etc h   of   th eir   en tire   a p p licatio n   al o n g   with   th e   d esig n   a n d   its   f u n ctio n ar ies   lik e   a   p o p - up   win d o w   (a   m o d al   in   C SS ) ,   th e   lin k   b etwe en   p a g es   in   th e   web   ap p licatio n ,   an im atio n   ef f ec ts ,   f ill   co lo r   p r o p er t y ,   a n d   m an y   m o r e.   On e   mor e   m ajo r   ad v an tag e   to   a   UI   d esig n er   is   th at   th e   n am es   of   th e   f ea tu r es   u s ed   in   Ad o b e   Xd   ar e   th e   s am e   in   c o d in g   C SS   p r o p e r ties .   A   d esig n   s ec tio n   is   wh er e   we   co u ld   m ak e   th e   web   d esig n s .   In   th is   s ec tio n ,   we   co u ld   u s e   th e   r ep ea t   g r id   f ea tu r e   w h ich   ca n   be   u s e d   to   r ep ea t   a   g r id   ce ll   t h r o u g h o u t   t h e   web   p ag e .   T h e r e   is   a ls o   a   f ea tu r e   ca lled   co m p o n en ts   in   th e   d esig n   s ec t io n   wh ich   is   u s ed   to   s y m b o liz e.   A   co m p o n en t   is   a   f ea tu r e   th at   can   be   u s ed   in   m u ltip le   p ag es ,   lik e   a   s id eb a r   an d   a   n a v b ar ,   wh ich   ar e   t h e   r ep ea tin g   elem e n ts   th r o u g h o u t   p ag es.   W h at   th e   co m p o n en t   f ea t u r e   d o es   is   th a t,   o n ce   we   s elec t   a   p ar ticu lar   s ec tio n   lik e   th e   s id eb ar   or   n a v b ar   of   a   p a g e   a n d   d ec lar e   it   as   a   co m p o n e n t,   th en   we   co u ld   u s e   th at   o v er   m an y   p ag es.   So ,   we   n ee d   to   o n ly   d esig n   o n ce   a n d   d ec lar e   it   as   a   co m p o n e n t,   af t er   th at   we   co u ld   u s e   th is   d esig n   th r o u g h   m u ltip le   p ag es.   Ot h er   th an   th e   d esig n   s ec tio n ,   Ad o b e   Xd   p r o v id es   a   p r o to ty p e   s ec tio n .   Her e   we   co u ld   lin k   b etwe en   p ag es   an d   p r o v id e   th e   f u n ctio n ality   to   th e   m o d als   ( p o p - win d o w) .   Als o   in   s y n tactica lly   awe s o m s ty le  s h ee ts   ( SAS S ) ,   we   co u ld   u s e   th e   b lo ck   elem e n t   an d   th e   id en tifie r   n o tatio n s   ea s ily ,   wh i ch   is   th e   tr en d   at   p r esen t   to   o r g an ize   elem en ts   of   a   b l o ck   ite m .   Fig u r e   5   s h o ws   th e   b lo c k   elem en t   n o tatio n .   W h er e   g aller y   is   a   b lo c k   a n d   item   is   a   b lo ck   elem en t.   T h e   f ig u r e   also   s h o ws   th e   SC S S   f ile   b ein g   co m p iled   to   C SS .   SC SS   u s es   th e   SASS   f ea tu r es   but   th e   cu r ly   b r ac es,   u n lik e   SASS   wh er e   we   r eq u ir e   in d en tatio n   a n d   th e   b lo ck   elem en t   n o tatio n   b ec o m es   m u ch   ea s ier   to   u s e.           Fig u r e   5.   SC SS   C o d e   an d   NPM   p ac k ag e     Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 5 0 2 - 4 7 5 2   I n d o n esian   J   E lec  E n g   &   C o m p   Sci,   Vo l.  24 ,   No .   2 No v em b er   2 0 2 1 9 7 8   -   985   984   Af ter   th e   co m p lete   p lan   o u t   of   a   UX   d esig n ,   a n d   th e   p r o t o ty p e   of   how   t h e   UI   of   o u r   ap p licatio n   n ee d s   to   lo o k   is   m ad e ,   th e   n e x t   s tep   is   to   co d e   th e   C SS .   T r ad itio n al   C SS   co d in g   p o s es   m an y   d if f ic u lties   to   d esig n er s ,   due   to   its   in f lex ib ilit y .   I n s tead   of   u s in g   C SS   th e   tr en d   now   is   SAS S.   SA SS   is   a   p r e p r o ce s s o r   s cr ip tin g   lan g u ag e   th at   is   c o m p iled   in to   C SS .   So ,   u ltima tely   th e   c o d e   wr itten   in   SASS   is   co n v er ted   to   a   C SS   f ile.   SASS   p r o v id es   f lex ib ilit y   to   C SS ,   we   co u ld   d ec lar e   m u ltip le   v ar iab les   f o r   co l o r s   o n ce   an d   u s e   th em   th r o u g h o u t   th e   d esig n .   An d   if   we   later   wan ted   to   ch an g e   th e   co lo r   we   co u ld   re - ass ig n   th at   v ar iab le   with   a   n ew   co lo r .   A n d   one   more   m ajo r   ad v an tag e   of   SASS   is   th at   we   c an   wr ite   th e   co d e   in   d if f er en t   f iles   an d   im p o r t   all   th e   f iles   u s in g   th e   @ im p o r t   k ey ,   so   we   co u l d   m ain tain   d if f er en t   co m p o n e n ts   lik e   th e   s id eb ar   co m p o n en t   in   a   d if f er en t   f ile   an d   n av b ar   in   a   d if f er en t   f ile   an d   th en   also   r eu s e   th ese   co m p o n en ts   f o r   a   d if f e r en t   p r o ject   to o .     3 . 3 . 2 .   Redux   R ed u x   is   an   o p e n - s o u r ce   J av a Scr ip t   lib r ar y   th at   h an d les   th e   s tatu s   ( o r   co m m o n ly   ca lled   a   s tate)   of   an   ap p licatio n .   It   is   wid ely   u s ed   to   cr ea te   th e   u s er   in ter f ac e   wit h   lib r ar ies   li k e   R ea ct   or   An g u l ar .   W ith   R ed u x   o n e   co u ld   co n n ec t   all   th eir   f r o n t - e n d   co m p o n e n ts .   A   s tate   in   R e d u x   is   a   lar g e   ter m   ( also   k n o wn   as   th e   s tate   tr ee ) ,   but   it   g en er ally   r ef er s   to   th e   s in g le   s tate   v alu e   in   th e   R ed u x   API   th at   is   co n tr o lled   by   th e   s t o r e   an d   r etu r n ed   by   th e   g etState( )   f u n ctio n .   It   r ef l ec ts   th e   en tire   s ta te   of   a   R ed u x   p r o g r am m e,   wh at   th is   m ea n s   is   th at   an y   ch an g e   in   an y   of   th e   co m p o n en ts   of   o u r   ap p licatio n   wo u ld   r esu lt   f r o m   a   ch an g e   in   th e   en tire   ap p l icatio n s   r en d er in g .   Mid d lewa r e   in   R ed u x   o f f er s   a   m ed iu m   to   d is p atch ed   ac tio n s   b ef o r e   it   r e ac h es   th e   r ed u ce r .   An   ac tio n   is   a   p ay lo ad   th at   ca r r ies   in f o r m ati o n   f r o m   th e   b ac k - e n d   of   o u r   a p p licatio n   a n d   is   s en d   to   th e   s to r e   so   th at   th e   s tate   co u ld   ac ce s s   th e   p ar ticu lar   ac tio n .   In   th e   ex am p le   ab o v e   wh er e   th e   u s er   g ets   au th en ticated ,   it   is   th e   p as s in g   of   in f o r m atio n   f r o m   th e   b ac k - e n d   to   th e   f r o n t - e n d ,   b ec a u s e   our   ap p licatio n s   b ac k - en d   is   co n n ec ted   to   our   Mo n g o DB   d atab ase   an d   in   t u r n ,   th e   f r o n t - e n d   r e n d er s   th e   in f o r m atio n   at   th e   b ac k - e n d .   So ,   th is   p ar t   of   ca r r y in g   th e   in f o r m atio n   f r o m   th e   b ac k - en d   to   th e   s to r e   is   ca r r ied   o u t   by   th e   ac tio n s .   A n d   th e   s to r e   is   wh er e   th e   r o o t   r ed u ce r s ,   in itial   s tat e,   an d   m id d lewa r e   ar e   c r ea te d .   C h r o m e   h as   an   ex ten s io n   f o r   R ed u x   th r o u g h   wh ich   we   co u ld   s ee   a n d   an al y ze   our   s tates.     N o w   an   a c t i o n   c o n t ai n s   a   t y p e   a n d   p a y l o a d .   T h e   t y p e   s p e c i f ie s   t h e   a ct i o n   to   be   p e r f o r m e d   ( i t s   a   la b e l   to   t h e   a c t i o n )   l i k e   f o r   e x a m p l e   to   g e t   t h e   p r o f i l e   of   a   u s e r ,   t h e   t y p e   s p e ci f i e d   to   t h at   a ct i o n   is   G E T _ PR OF I L E ”.   T h e   p a y l o a d   c o n t a i n s   t h e   i n f o r m a t i o n   f r o m   t h e   b a c k - e n d   of   a   p a r t i c u l a r   a ct i o n   q u e r i e d .   In   th i s   e x a m p l e   of   t h e   G E T _ PR OF I L E   t y p e   a c ti o n ,   a   g e t   r e q u e s t   t h r o u g h   a x i o s   is   m a d e   to   t h e   b a c k - e n d   a n d   t h e   r e s p o n s e   d at a   f r o m   t h e   b a c k - e n d   is   s e n d   as   t h e   a c t io n s   p a y l o a d .   N o w   t h e   a c ti o n s   p a y l o a d   is   p ass e d   to   t h e   R e d u x s   s t o r e ,   f r o m   h e r e   t h e   p a y l o a d   is   t h e n   p a s s e d   to   th e   s t at e   a n d   t h e n   t h e   e n t i r e   a p p l i c a t i o n s   f r o n t - e n d   r e c ei v e s   th e   c h a n g e s   a p p li e d .   N o w   if   t h e   l o g i n   is   f a il e d ,   t h e   ac t i o n   g e ts   u p d a t e d   to   t y p e   L OG I N _ F A I L   a n d   is   a u t h e n t i c ate d   a t t r i b u te   is   s e t   to   f a l s e ,   i n d i c at i n g   t h e   u s e r   e n t e r ed   i n v a l i d   c r e d e n t i a l s .   A   n o t i f i ca t i o n   of   I n v a l i d   c r e d e n t i a l   is   s e n t   f r o m   t h e   b a c k - e n d   to   t h e   f r o n t - e n d   t h r o u g h   t h e   a c t i o n   t y p e   of   L O GI N _ F A I L .   N o w   t h i s   n o t i f i ca t i o n   is   a   d i v is i o n   ( < d i v > < / d i v > )   w h i c h   w o u l d   r e m a i n   in   t h e   l o g i n   p a g e.   To   r e m o v e   t h i s   n o t i f ic a t io n   a c t i o n   of   t y p e   R E MO V E _ A L E R T   is   s e t   a f te r   5   s e c o n d s   u s i n g   t h e   s e t T i m eo u t   m e t h o d   in   J a v a S c r i p t .   W h at   t h is   a ct i o n   d o e s   is   t h a t   it   w o u l d   s et   t h e   d is p l a y   b l o c k   to   none   ( d i s p l a y :   n o n e )   a f t e r   5   s e c o n d s .       4.   CO NCLU SI O N   Ma n y   W eb   tech n o lo g ies   ar e   b ein g   m ad e   to   ea s e   th e   co n n ec tio n   b etwe en   a   r etailer   an d   cu s to m er s   ac r o s s   th e   g l o b e.   T h e   m o s t   b o o m in g   tech   at   p r esen t   in   W eb   tech   is   th e   Mo n o g o DB   d a tab ase ,   No d ejs,   a n d   R ea ctjs .   Mo n o g o d b   b ein g   a   non - r elatio n al   d ata b ase   m an ag em en t   s y s tem   ( n o n - R DB S),   is   th e   p r ef er r ed   d atab ase   at   p r esen t   due   to   its   ca p ab ilit y   to   h an d le   h u g e   v o lu m es   of   d ata   wh ich   a   tr ad itio n al   R DB MS   s y s tem   lik e   My SQL   f ails .   Mo n o g o d b   u s es   J av aScr ip t   o b ject   n o t atio n   ( J SON)   d ata   f o r m at   to   s to r e   d ata   in to   its   d atab ase,   in   J SON   f o r m at   d ata   is   s to r ed   in   a   k ey - v alu e   p air .   So ,   u n lik e   My SQL   wh er e   d ata   is   to   be   s to r ed   in   a   tab le,   J SON   d ata   is   m u ch   ea s ier   to   h an d le.   In   ca s e   of   m ak in g   a   s ch em a   to   r ef er e n ce   b etwe en   d ata   in   Mo n g o DB   d atab ase   lik e   th at   of   My SQL   ( r elatin g   b etwe en   tab les   d ata) ,   Mo n g o o s e   is   u s e d   to   m ak e   a   s ch em a   an d   p r o v id es   th e   co n n ec tio n   b etwe en   th e   b ac k - en d   of   t h e   a p p licatio n   with   th e   Mo n g o DB   d atab ase.   An d   th e   b ac k - en d   of   an   ap p licatio n   is   b u ild   u s in g   No d ejs.   R ea ctjs   is   u s ed   f o r   th e   clien t - s id e   r en d e r in g   of   th e   web s ite   ( as   a   f r o n t - en d ) .   In   th e   ca s e   of   R ea ct,   it   u s e s   a   v ir tu al   DOM   wh ich   o n ly   re - r en d er s   th e   p ar ticu lar   co m p o n en t   th at   is   b ee n   u p d ated ,   r at h er   th a n   re - r e n d er in g   th e   e n tire   co n te n t   of   th e   DOM   as   in   th e   ca s e   of   An g u lar .         ACK NO WL E DG E M E NT S   T h is   r esear ch   wo r k   was   f u n d e d   by   W o o s o n g   Un iv e r s ity s   Aca d em ic   R esear ch   Fu n d in g - 2021 .         Evaluation Warning : The document was created with Spire.PDF for Python.
I n d o n esian   J   E lec  E n g   &   C o m p   Sci     I SS N:  2502 - 4 7 5 2       Mo d ern   to o ls   a n d   cu r r en t tren d s   in   w eb - d ev elo p men t   ( Deb a n i P r a s h a d   Mis h r a )   985   RE F E R E NC E S   [1 ]   K.   S.   Ala o u i,   J.   F o sh i ,   a n d   Y.   Z o u in e ,   Ra d i o   o v e r   fi b e r   sy ste m   b a se d   on   a   h y b rid   li n k   f o r   n e x t   g e n e ra ti o n   of   o p ti c a l   fib e r   c o m m u n ica ti o n ,   In ter n a ti o n a l   J o u r n a l   of   El e c trica l   a n d   Co mp u ter   E n g i n e e rin g   (IJ ECE ) ,   v o l.   9,   no.   4,     pp.   2 5 7 1 - 2 5 7 7 ,   Au g .   2 0 1 9 ,   d o i:   1 0 . 1 1 5 9 1 / ij e c e . v 9 i 4 . p p 2 5 7 1 - 2 5 7 7   [2 ]   G.   S tu a rt,   HTM L5   a n d   t h e   C a n v a s   El e m e n t ,   In tro d u c in g   J a v a S c rip t   Ga me   De v e lo p me n t ,   p p .   3 - 16,   2 0 1 7 ,     d o i :   1 0 . 1 0 0 7 / 9 7 8 - 1 - 4 8 4 2 - 3 2 5 2 - 1.     [3 ]   J.   Attard i,   I n tro d u c ti o n   to   C S S ,   M o d e rn   CS S ,   2 0 2 0 ,   p p .   1 - 1 5 ,   d o i :   1 0 . 1 0 0 7 /9 7 8 - 1 - 4 8 4 2 - 6 2 9 4 - 8.     [4 ]   A.   G u h a ,   C.   S a ft o iu ,   a n d   S.   Krish n a m u rth i,   Th e   Esse n c e   of   Ja v a S c rip t ,   E u ro p e a n   C o n fer e n c e   on   Ob jec t - Or ien ted   Pro g ra mm i n g Ob jec t - Or ien ted   P ro g ra mm in g ,   2 0 1 0 ,   p p .   1 2 6 - 1 5 0 doi :   1 0 . 1 0 0 7 /9 7 8 - 3 - 6 4 2 - 1 4 1 0 7 - 2 _ 7 .     [5 ]   K.   T.   S o n g   a n d   S.   H.   P a rk ,   De sig n   of   M a ste r - S la v e - S lav e   Re p l ica ti o n   M o d e l   to   Ba lan c e   M a ste r   Ov e rh e a d   fo r   Ke y - v a lu e   Da tab a se ,   T h e   J o u r n a l   of   K o re a n   In sti tu te   of   In f o rm a ti o n   T e c h n o l o g y ,   v o l.   1 5 ,   n o .   2,   pp.   7 - 1 4 ,   2 0 1 7 ,   d o i:   1 0 . 1 4 8 0 1 /JKIIT . 2 0 1 7 . 1 5 . 2 . 7 .     [ 6 ]   M .   W a s e e m ,   P .   L i a n g ,   M .   S h a h i n ,   A .   D .   S a l l e ,   a n d   G .   M á r q u e z ,   D e s i g n ,   m o n i t o r i n g ,   a n d   t e s t i n g   of   m i c r o s e r v i c e s   s y s t e m s :   T h e   p r a c t i t i o n e r s   p e r s p e c t i v e ,   J o u r n a l   of   S y s t e m s   and   S o f t w a r e ,   v o l .   182,   2021,   d o i :   1 0 . 1 0 1 6 / j . j s s . 2 0 2 1 . 1 1 1 0 6 1 .     [7 ]   M .   Th a k k a r B u il d i n g   Re a c Ap p with   S e rv e r - S i d e   Re n d e rin g ,   Ne Yo rk ,   USA:  Ap re ss ,   20 20 ,     d o i:   1 0 . 1 0 0 7 /9 7 8 - 1 - 4 8 4 2 - 5 8 6 9 - 9.     [8 ]   G .   S a y fa n ,   Tes ti n g   Re a c t. js  Ap p li c a ti o n s   with   Je st - Co m p lete   I n tro d u c ti o n   to   F a st,   Eas y   Tes ti n g ,   S p rin g e rLi n k 2 0 1 9 .   A v a il a b le.  [O n li n e ].   h t tp s:// li n k . sp ri n g e r. c o m / v id e o /1 0 . 1 0 0 7 % 2 F 9 7 8 - 1 - 4 8 4 2 - 3 9 8 0 - 3     [9 ]   Av a il a b le.   [On l in e ].   h tt p s :/ /ww w.co u rse h e ro . c o m /fi le/6 9 7 7 6 2 0 7 / BTM 4 9 5 - AA - Ou tl i n e - F a ll - 2 0 2 0 - V0 3 2 - RA - wit h - Li n k s p d f/   [ 1 0 ]   Y.   Q i ,   T h e   r o l e   of   m o b i l e   w e b   p l a t f o r m s   in   t h e   d e v e l o p m e n t   of   c r i t i c a l ,   s t r a t e g i c   a n d   l a t e r a l   t h i n k i n g   s k i l l s   of   s t u d e n t s   in   d i s t a n c e   p h y s i c a l   e d u c a t i o n   c o u r s e s ,   T h i n k i n g   S k i l l s   and   C r e a t i v i t y ,   v o l .   42,   2021,   d o i :   1 0 . 1 0 1 6 / j . t s c . 2 0 2 1 . 1 0 0 9 3 5 .     [1 1 ]   A.   S tad n ick i ,   F.   F.   P ietr o ń ,   a n d   P.   B u re k ,   To wa rd s   a   M o d e rn   On to l o g y   De v e l o p m e n t   E n v ir o n m e n t,   Pro c e d i a   Co mp u ter   S c ien c e ,   v o l.   1 7 6 ,   p p .   7 5 3 - 7 6 2 ,   2 0 2 0 ,   d o i:   1 0 . 1 0 1 6 / j. p r o c s.2 0 2 0 . 0 9 . 0 7 0 .     [1 2 ]   D.   S c h wa rz ,   J u mp   sta rt   Ad o b e   XD .   S it e Po in t ,   2 0 1 7 .   Av a il a b le .   [On li n e ].   h tt p s:/ /www . sitep o i n t. c o m / p re m iu m /b o o k s/j u m p - sta rt - a d o b e - xd   [1 3 ]   D.   M a z in a n ia n   a n d   N.   Tsa n talis,   An   Emp iri c a l   S tu d y   on   th e   Use   of   CS S   P re p ro c e ss o rs ,   IEE E   2 3 r d   I n ter n a t io n a l   Co n fer e n c e   on   S o ft w a re   An a lys is,   Evo lu t io n ,   a n d   Ree n g in e e rin g ,   2 0 1 6 ,   d o i:   1 0 . 1 1 0 9 /S AN ER. 2 0 1 6 . 1 8 .     [ 1 4 ]   A.   L i b b y ,   I n t r o d u c i n g   D a r t   S a s s ,   2019,   pp.   1 - 33.   A v a i l a b l e .   [ O n l i n e ] .   h t t p s : / / d o k u m e n . p u b / i n t r o d u c i n g - d a r t - s a s s - a - p r a c t i c a l - i n t r o d u c t i o n - to - t h e - r e p l a c e m e n t - f o r - s a s s - b u i l t - on - d a r t - 1 s t - ed - 978 - 1 - 4842 - 4371 - 8 - 978 - 1 - 4842 - 4 3 7 2 - 5 . h t m l   [1 5 ]   D.   Ce d e rh o lm,   S A S S   p o u r   L e s   we b   d e sig n e rs ,   2 0 1 5 .   A v a il a b le.   [On l in e ].   h tt p s:/ /www . e y ro ll e s.c o m /I n fo rm a ti q u e /L i v re /sa ss - pour - les - we b - d e sig n e rs - 9 7 8 2 2 1 2 1 4 1 4 7 4 /   [1 6 ]   C.   G y o d a n d   R.   G y o d i,   A   Co m p a ra ti v e   S t u d y   b e twe e n   t h e   Ca p a b il it ies   of   M y S Ql   Vs.   M o n g o DB   as   a   Ba c k - En d   f o r   an   On li n e   P latfo rm ,   In te rn a ti o n a l   J o u r n a l   of   Ad v a n c e d   C o mp u ter   S c ien c e   a n d   A p p l ica ti o n s ,   v o l.   7,   n o .   1 1 ,   pp.   73 - 7 8 ,   2 0 1 6 ,   d o i:   1 0 . 1 4 5 6 9 /IJ ACSA. 2 0 1 6 . 0 7 1 1 1 1 .     [1 7 ]   T.   E.   S o m e fu n ,   C.   O.   A.   Aw o so p e ,   a n d   C.   S ik a ,   De v e lo p m e n t   of   a   re se a rc h   p r o jec t   re p o sit o ry ,   T EL KOM NIKA   ( T e lec o mm u n ica ti o n ,   Co mp u ti n g ,   El e c tro n ics   a n d   Co n tro l ) ,   v o l.   1 8 ,   n o .   1,   p p .   15 - 1 6 5 ,   F e b .   2 0 2 0 ,     d o i:   1 0 . 1 2 9 2 8 / telk o m n ik a . v 1 8 i1 . 1 0 4 5 2 .     [1 8 ]   Av a il a b le.   [On l in e ].   h tt p :/ /i m g 1 0 5 . jo b 1 0 0 1 . c o m / u p l o a d /ad m i n n e w /2 0 1 5 - 04 - 0 7 / 1 4 2 8 3 9 3 3 0 4 - P TF EK AZ. p d f   [1 9 ]   S.   B.   Uz a y r,   N.   C lo u d ,   a n d   T.   A m b ler,   M o n g o o se .   In   Ja v a S c rip t   fra m e wo rk s   f o r   m o d e rn   we b   d e v e lo p m e n t :   T h e   e ss e n ti a l   fra m e wo rk s,   li b ra ries ,   a n d   t o o ls   to   lea rn   ri g h t   now ,   Ap re ss ,   2 0 1 9 ,   d o i:   1 0 . 1 0 0 7 /9 7 8 - 1 - 4 8 4 2 - 4 9 9 5 - 6.     [2 0 ]   A.   H.   Ch il l ó n ,   D.   S.   Ru iz,   J.   G.   M o li n a ,   a n d   S.   F.   M o ra les ,   A   M o d e l - Dri v e n   Ap p ro a c h   to   G e n e ra te   S c h e m a s   fo r   Ob jec t - Do c u m e n t   M a p p e rs ,   IEE E   Acc e ss ,   v o l.   7,   p p .   5 9 1 2 6 - 5 9 1 4 2 ,   2 0 1 9 ,   d o i:   1 0 . 1 1 0 9 /ACCE S S . 2 0 1 9 . 2 9 1 5 2 0 1   [2 1 ]   S.   Ho lme s,   M o n g o o se   f o r   a p p li c a ti o n   d e v e lo p m e n t ,   P a c k t   Pu b li s h in g ,   2 0 1 3 .   IS BN - 1 3 :   9 7 8 - 1 7 8 2 1 6 8 1 9 5 .     [2 2 ]   S.   Ti lk o v   a n d   S.   Vin o sk i,   No d e . js:   Us in g   Ja v a S c ri p t   to   Bu il d   Hig h - P e rfo rm a n c e   Ne two rk   P r o g ra m s ,   IEE E   In ter n e t   Co m p u ti n g ,   v o l.   1 4 ,   no.   6,   p p .   80 - 83,   2 0 1 0 ,   d o i:   1 0 . 1 1 0 9 /M IC. 2 0 1 0 . 1 4 5 .     [ 2 3 ]   A.   M a r d a n ,   P r a c t i c a l   N o d e . j s :   B u i l d i n g   r e a l - w o r l d   s c a l a b l e   w e b   a p p s ,   A p r e s s ,   2018,   d o i :   1 0 . 1 0 0 7 / 9 7 8 - 1 - 4302 - 6596 - 2 .     [2 4 ]   O.   H.   Ja d e r,   S.   R.   M.   Zee b a re e ,   a n d   R.   R.   Zeb a ri,   S tate   of   a rt   s u rv e y   f o r   we b   se rv e r   p e rfo rm a n c e   m e a su re m e n t   a n d   lo a d   b a lan c i n g   m e c h a n ism s ,   In ter n a ti o n a l   J o u rn a l   of   S c ien ti fi c   a n d   T e c h n o l o g y   Res e a rc h ,   v o l.   8,   no.   1 2 ,     pp.   5 3 5 - 5 4 3 ,   De c .   2 0 1 9 .     [2 5 ]   L.   P.   C h it ra   a n d   R.   S a tap a t h y ,   " P e rfo rm a n c e   c o m p a riso n   a n d   e v a lu a ti o n   of   No d e . js   a n d   trad it i o n a l   we b   se rv e r   (IIS ), "   In ter n a ti o n a l   Co n fer e n c e   on   Al g o rit h ms ,   M e th o d o l o g y ,   M o d e ls   and   A p p li c a ti o n s   in   Eme rg in g   T e c h n o lo g ies   (ICAM M A ET ) ,   2 0 1 7 ,   p p .   1 - 4,   d o i:   1 0 . 1 1 0 9 /ICAM M AET . 2 0 1 7 . 8 1 8 6 6 3 3 .     [2 6 ]   N.   M c Clay ,   M EA N   c o o k b o o k :   T h e   me a n e st   se t   of   M E AN   sta c k   so l u ti o n s   a r o u n d ,   P a c k t   P u b l ish i n g ,   2 0 1 7 .     [2 7 ]   A.   Bh a wiy u g a ,   S.   A.   Kh a rism a ,   a n d   B.   J.   S a n t o so ,   Cl o u d - b a se d   m id d lew a re   fo r   su p p o rti n g   b a t c h   a n d   stre a m   a c c e s s   o v e r   sm a rt   h e a lt h c a re   we a ra b le   d e v ice ,   B u ll e ti n   of   E lec trica l   En g i n e e rin g   a n d   I n f o rm a ti c s   (BE EI) ,   v o l .   9,   no.   5,   p p .   1 9 9 0 - 1 9 9 7 ,   2 0 2 0 ,   d o i:   1 0 . 1 1 5 9 1 /ee i. v 9 i 5 . 1 9 7 8 .     [2 8 ]   Y.   Ch i k a   a n d   O.   K.   Esth e r,   F in a n c ial   sto c k   a p p li c a ti o n   u sin g   w e b so c k e t   in   re a l   ti m e   a p p li c a ti o n ,   In ter n a ti o n a l   J o u rn a l   of   In f o rm a ti c s   a n d   Co mm u n ica ti o n   T e c h n o lo g y   (I J ICT ) ,   v o l.   8,   n o .   3,   p p .   1 3 9 - 1 5 1 ,   2 0 1 9 ,     d o i:   1 0 . 1 1 5 9 1 / ij ict. v 8 i 3 . p p 1 3 9 - 1 5 1 .     [2 9 ]   P.   G u p ta,   S.   Ba n e rjee ,   D.   P.   M is h ra   a n d   S.   R.   S a l k u ti ,   Co n n e c ti o n   sta tu s   re p o rt   g e n e ra t o r,   In d o n e sia n   J o u rn a l   of   El e c trica l   En g in e e rin g   a n d   C o mp u ter   S c ien c e   (IJ EE CS ) ,   v o l.   2 2 ,   no.   2,   pp.   1 0 6 9 - 1 0 7 7 ,   S e p t .   2 0 2 1 ,     d o i:   1 0 . 1 1 5 9 1 / ij e e c s.v 2 2 . i2 . p p 1 0 6 9 - 1 0 7 7   Evaluation Warning : The document was created with Spire.PDF for Python.