JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js...
Transcript of JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js...
![Page 1: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/1.jpg)
<divtag>Computer Research Group
JavaScript Web Applications
Hiun KimComputer Science Department, Sejong University
Seoul, South Korea
DIVTAG DEVELOPER MEETUP @ NOV. 12, 2015
![Page 2: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/2.jpg)
<divtag>Computer Research Group
We are old, the web as we know..
![Page 3: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/3.jpg)
<divtag>Computer Research Group
New Waves of Modern Web
![Page 4: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/4.jpg)
<divtag>Computer Research Group
![Page 5: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/5.jpg)
<divtag>Computer Research Group
Single Page Application
Web site that fits on a single web page with the goal of providing a more fuild UX akin to desktop apps
- via Wikipedia
![Page 6: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/6.jpg)
<divtag>Computer Research Group
Single Page Application (cont.)
Concepts established circa 2002 (not sure)
US Patents 8136109 ( Delivery of data and formatting information to allow client-side manipulation )
![Page 7: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/7.jpg)
<divtag>Computer Research Group
Single Page Application (cont.)
Provides layout and partial viewEvery event is related to JavaScriptThey against the web we know!
![Page 8: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/8.jpg)
<divtag>Computer Research Group
Enhancing User Experience
Proviedes seamless experience through,
Reducing round tripping of submission
Reducing process of CSS & JavaScript
![Page 9: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/9.jpg)
<divtag>Computer Research Group
Continuity
Page does not reload completely,
browser can store state with JavaScript
![Page 10: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/10.jpg)
<divtag>Computer Research Group
Continuity (cont)
Web is not only a document viewer,but data manipulator (Google Spread Sheets) or interactive viewer (Facebook.com )
![Page 11: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/11.jpg)
<divtag>Computer Research Group
Pros
Does not require to load whole page,Saving time Seamless user experience
https://upload.wikimedia.org/wikipedia/commons/c/ce/Bonsack_machine.png
![Page 12: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/12.jpg)
<divtag>Computer Research Group
Cons
Not simple, not pure (as definition of today)
Often slow for processingFallback exist but incomplete Sometime impossible
http://grannymar.com/wp-content/uploads/2010/03/dscf5587.jpg
![Page 13: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/13.jpg)
<divtag>Computer Research Group
Core Mechanism
Browser is sandboxJavaScript can manipulate URL and HistorypushState for creating history
![Page 14: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/14.jpg)
<divtag>Computer Research Group
Libraries and Frameworks
jquery-pjax (pushState + ajax) angularjs ember.js etc.
![Page 15: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/15.jpg)
<divtag>Computer Research Group
jquery-pjax
<!DOCTYPEhtml><html><head><script="./jquery.pjax.js"></script><script>$(document).pjax('a','#pjax-container')
</script></head><body><h1>MySite</h1><divclass="container"id="pjax-container">Goto<ahref="/page/2">nextpage</a>.
</div></body></html>
![Page 16: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/16.jpg)
<divtag>Computer Research Group
jquery-pjax (cont.)
GET/?_pjax=%23mainHTTP/1.1Host:pjax.herokuapp.comConnection:keep-alivePragma:no-cacheCache-Control:no-cacheUser-Agent:Mozilla/5.0(Macintosh;IntelMacOSX10_11_1)AppleWebKit/537.36(KHTML,likeGecko)Chrome/46.0.2490.80Safari/537.36Content-Type:application/x-www-form-urlencoded;charset=UTF-8Accept:text/html,*/*;q=0.01X-Requested-With:XMLHttpRequestX-PJAX:trueX-PJAX-Container:#mainReferer:http://pjax.herokuapp.com/dinosaurs.htmlAccept-Encoding:gzip,deflate,sdchAccept-Language:en-US,en;q=0.8,ko;q=0.6
![Page 17: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/17.jpg)
<divtag>Computer Research Group
Workflow
!GET /login HTTP/1.1 Host: example.com
Response layout.html
!"
GET /login HTTP/1.1
X-PJAX: true
"!
Response login.html
![Page 18: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/18.jpg)
<divtag>Computer Research Group
Workflow (cont.)
! GET /api/posts HTTP/1.1
Response JSON Object
!"
.
.
.
.
.
.
![Page 19: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/19.jpg)
<divtag>Computer Research Group
Paradigm shifts in rendering
In usual, logic within template executed
Data is rendered in server
<?php//PHPrendersdatadirectlytotemplatefor($x=0;$x<=10;$x++){echo"<b>Thenumberis:$x</b><br>";}?>
![Page 20: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/20.jpg)
<divtag>Computer Research Group
In usual, logic within template executed
Server only render template
Client JS renders data
Paradigm shifts in rendering (cont.)
![Page 21: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/21.jpg)
<divtag>Computer Research Group
Frameworks
Angularjs Bidirectional UI Data Binding
Ember.js MVC Architectural Pattern
METEOR Fullstack Framwrork for SPAs.
![Page 22: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/22.jpg)
<divtag>Computer Research Group
Libraries
React A JavaScript library for building user interfaces
Vue.js Reactive Components for Modern Web Interfaces
![Page 23: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/23.jpg)
<divtag>Computer Research Group
New Perspectives
Facebook: Rethink established best practices™
- Ben Alman
![Page 24: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/24.jpg)
<divtag>Computer Research Group
XHP
Augments the syntax of the language such that XML document fragments become valid PHP expressions.
![Page 25: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/25.jpg)
<divtag>Computer Research Group
XHP (cont.)
<?hh$href='http://www.facebook.com';echo<ahref={$href}>Facebook</a>;
![Page 26: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/26.jpg)
<divtag>Computer Research Group
XHP (cont.)
<?hh$post=<divclass="post"><h2>{$post}</h2><p><span>Heythere.</span></p><ahref={$like_link}>Like</a></div>;
![Page 27: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/27.jpg)
<divtag>Computer Research Group
XHP (cont.)
<?hh$list=<ul/>;foreach($itemsas$item){$list->appendChild(<li>{$item}</li>);}
![Page 28: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/28.jpg)
<divtag>Computer Research Group
React
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.
We built React to solve one problem: building large applications with data that changes over time.
- via facebook.github.io/react
![Page 29: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/29.jpg)
<divtag>Computer Research Group
React (cont.)
varHelloMessage=React.createClass({render:function(){return(<div><p>Hello{this.props.name+'!'}</p><i>ByReact</i>
</div>);
}});
varmountNode=jQuery('#main')[0];ReactDOM.render(<HelloMessagename="Hiun"/>,mountNode);
![Page 30: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/30.jpg)
<divtag>Computer Research Group
React (cont.)
<divdata-reactid=".9"><pdata-reactid=".9.0"><spandata-reactid=".9.0.0">Hello</span><spandata-reactid=".9.0.1">Hiun!</span></p><idata-reactid=".9.1">ByReact</i>
</div>
![Page 31: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/31.jpg)
<divtag>Computer Research Group
React (cont.)varPostList=React.createClass({render:function(){return(<ul>{this.props.posts.map(function(post){return(<li><b>{post.t}</b><p>{post.b}</p></li>)
})}</ul>
);}
});
varposts=[{t:'foo1',b:'bar1'},{t:'foo2',b:'bar2'}]ReactDOM.render(<PostListposts={posts}/>,mountNode);
![Page 32: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/32.jpg)
<divtag>Computer Research Group
React (cont.)
<divdata-reactid=".9"><pdata-reactid=".9.0"><spandata-reactid=".9.0.0">Hello</span><spandata-reactid=".9.0.1">Hiun!</span></p><idata-reactid=".9.1">ByReact</i>
</div>
![Page 33: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/33.jpg)
<divtag>Computer Research Group
varPostList=React.createClass({render:function(){return(<ul>{this.props.posts.map(function(post){return(<li><b>{post.t}</b><p>{post.b}</p></li>)
})}</ul>
);}
});
JSX
A.K.A JavaScript Syntax Extension
These stuff, right there - - - - - - - - - >
![Page 34: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/34.jpg)
<divtag>Computer Research Group
Module
Basic unit of abstraction
Basic unit of managing complexity
https://upload.wikimedia.org/wikipedia/commons/3/32/Lego_Color_Bricks.jpg
![Page 35: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/35.jpg)
<divtag>Computer Research Group
ES2015 - Module System
Commonly referred to as ES6,
Provides module system
But preprocessing is required to run in the browser
![Page 36: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/36.jpg)
<divtag>Computer Research Group
ES2015 - Module System (cont.)
//circle.jsexportfunctionareaCalc(r){constPI=Math.PI;returnPI*r*r;
}
//proc.jsimportareaCalcfromcircle;areaCale(3);//28.274333882308138
![Page 37: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/37.jpg)
<divtag>Computer Research Group
ES2015 - Module System (cont.)
importjQueryfrom'lib/jquery.js';importReactfrom'lib/react.js';
importautosizefrom'lib/autosize.min.js';importSpinnerfrom'lib/spin.min.js';
importvalidatorfrom'lib/validator.min.js';import*asutilsfrom'utils/index.js';
import*aspostfrom'post.js';
![Page 38: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/38.jpg)
<divtag>Computer Research Group
Bundling the Web
A big code base needs to be organized
A lot of preprocessing is required - SCSS, ES2015
Module systems offer the option to split your code base into modules.
- via webpack.github.io
![Page 39: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/39.jpg)
<divtag>Computer Research Group
The Future?
HTML6 proposal -
There’s a standard design pattern emerging via all the front-end javascript frameworks where content is loaded dynamically via JSON APIs.
https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Mar/0071.html
![Page 40: JavaScript Web Applications€¦ · React A JavaScript library for building user interfaces Vue.js Reactive Components for Modern Web Interfaces Computer Research Group](https://reader035.fdocuments.us/reader035/viewer/2022063010/5fc3030a5351d8597b62a4bd/html5/thumbnails/40.jpg)
<divtag>Computer Research Group
Thank you
for thinking modern web with us! slides are available at http://divtag.sejong.edu