Slide 1

Slide 1 text

Using Rails REST & AJAX JS library with (PHP|.+) Junior Grossi 10th PHPMG Talks @ThoughtWorks - Apr 2017

Slide 2

Slide 2 text

About Me PHPMG group organizer Software Engineer at InterNACHI (PHP/Laravel) Creator of Corcel PHP Master's in Information Science - UFMG 2015 Specialization in Web Developmenet - PUCMG 2013 MBA in Business Management - FGV 2009 Bachelor's in Computer Science - PUCMG 2007 Zend Certi ed Engineer - 2011

Slide 3

Slide 3 text

http://github.com/jgrossi http://github.com/corcel

Slide 4

Slide 4 text

The magic behind R u b y O n R a i l s [how it works]

Slide 5

Slide 5 text

https://github.com/rails/jquery-ujs s r c / r a i l s . j s

Slide 6

Slide 6 text

n p m i n s t a l l j q u e r y - u j s

Slide 7

Slide 7 text

AJAX with d a t a - r e m o t e on < f o r m > < % = f o r m _ f o r @ u s e r , r e m o t e : t r u e % > < f o r m a c t i o n = " / u s e r s " m e t h o d = " P O S T " d a t a - r e m o t e = " t r u e " >

Slide 8

Slide 8 text

AJAX with d a t a - r e m o t e on < a > < a h r e f = " / u s e r s / 1 0 / a c t i v a t e " d a t a - r e m o t e = " t r u e " > A c t i v a t e < / a >

Slide 9

Slide 9 text

AJAX Response j s o n or h t m l j a v a s c r i p t d a t a - t y p e = " s c r i p t "

Slide 10

Slide 10 text

AJAX Call d a t a - r e m o t e = " t r u e " d a t a - t y p e = " s c r i p t " < f o r m a c t i o n = " / u s e r s / 1 0 " m e t h o d = " P U T " . . . >

Slide 11

Slide 11 text

Live code #1 S e r v i c e P r o v i d e r r o u t e s / w e b . p h p and T a s k s C o n t r o l l e r c r e a t e . b l a d e . p h p and s t o r e . b l a d e . j s a c t i v a t e . b l a d e . j s d a t a - d i s a b l e - w i t h

Slide 12

Slide 12 text

h t t p : / / u r l . j g r o s s i . c o m / p h p m g t a l k s 1 0

Slide 13

Slide 13 text

RESTFUL routes < a h r e f = " . . . " d a t a - m e t h o d = " d e l e t e " d a t a - r e m o t e = " t r u e " > D e l e t e < / a > d a t a - m e t h o d = " D E L E T E "

Slide 14

Slide 14 text

Live code #2 i n d e x . b l a d e . p h p d e s t r o y . b l a d e . j s

Slide 15

Slide 15 text

Con rmation Dialog d a t a - c o n f i r m = " A r e y o u s u r e ? "

Slide 16

Slide 16 text

Live code #3 Like Action a c t i o n s . b l a d e . p h p

Slide 17

Slide 17 text

Summary d a t a - r e m o t e for AJAX d a t a - t y p e for Response d a t a - m e t h o d for REST method d a t a - d i s a b l e - w i t h when submitting d a t a - c o n f i r m con rmation dialog d a t a - p a r a m s request parameters

Slide 18

Slide 18 text

d a t a - p a r a m s = " f o o = b a r & j o h n = d o e " < a h r e f = " / s a y - n a m e " d a t a - p a r a m = " n a m e = j u n i o r " . . > < a h r e f = " / s a y - n a m e ? n a m e = j u n i o r " . . >

Slide 19

Slide 19 text

Tip for AJAX loader $ ( d o c u m e n t ) . a j a x S t a r t ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . a d d C l a s s ( ' i s - l o a d i n g ' ) ; } ) . a j a x S t o p ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . r e m o v e C l a s s ( ' i s - l o a d i n g ' ) ; } ) ; $ ( d o c u m e n t ) . a j a x S t a r t ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . c l o s e s t ( ' . l o a d e r ' ) . s h o w ( ) ; } ) . a j a x S t o p ( f u n c t i o n ( e ) { $ ( e . t a r g e t . a c t i v e E l e m e n t ) . c l o s e s t ( ' . l o a d e r ' ) . h i d e ( ) ; } ) ;

Slide 20

Slide 20 text

Thanks! Questions? http://github.com/jgrossi/rails-js-php Twitter: @ j u n i o r _ g r o s s i PHPMG Slack: @ j g r o s s i