Embed Size (px)
Citation preview
<divtag>Computer Research Group
JavaScript Web Applications
Hiun KimComputer Science Department, Sejong University
Seoul, South Korea
DIVTAG DEVELOPER MEETUP @ NOV. 12, 2015
<divtag>Computer Research Group
We are old, the web as we know..
<divtag>Computer Research Group
New Waves of Modern Web
<divtag>Computer Research Group
<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
<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 )
<divtag>Computer Research Group
Single Page Application (cont.)
Provides layout and partial viewEvery event is related to JavaScriptThey against the web we know!
<divtag>Computer Research Group
Enhancing User Experience
Proviedes seamless experience through,
Reducing round tripping of submission
Reducing process of CSS & JavaScript
<divtag>Computer Research Group
Continuity
Page does not reload completely,
browser can store state with JavaScript
<divtag>Computer Research Group
Continuity (cont)
Web is not only a document viewer,but data manipulator (Google Spread Sheets) or interactive viewer (Facebook.com )
<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
<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
<divtag>Computer Research Group
Core Mechanism
Browser is sandboxJavaScript can manipulate URL and HistorypushState for creating history
<divtag>Computer Research Group
Libraries and Frameworks
jquery-pjax (pushState + ajax) angularjs ember.js etc.
<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>
<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
<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
<divtag>Computer Research Group
Workflow (cont.)
! GET /api/posts HTTP/1.1
Response JSON Object
!"
.
.
.
.
.
.
<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>";}?>
<divtag>Computer Research Group
In usual, logic within template executed
Server only render template
Client JS renders data
Paradigm shifts in rendering (cont.)
<divtag>Computer Research Group
Frameworks
Angularjs Bidirectional UI Data Binding
Ember.js MVC Architectural Pattern
METEOR Fullstack Framwrork for SPAs.
<divtag>Computer Research Group
Libraries
React A JavaScript library for building user interfaces
Vue.js Reactive Components for Modern Web Interfaces
<divtag>Computer Research Group
New Perspectives
Facebook: Rethink established best practices™
- Ben Alman
<divtag>Computer Research Group
XHP
Augments the syntax of the language such that XML document fragments become valid PHP expressions.
<divtag>Computer Research Group
XHP (cont.)
<?hh$href='http://www.facebook.com';echo<ahref={$href}>Facebook</a>;
<divtag>Computer Research Group
XHP (cont.)
<?hh$post=<divclass="post"><h2>{$post}</h2><p><span>Heythere.</span></p><ahref={$like_link}>Like</a></div>;
<divtag>Computer Research Group
XHP (cont.)
<?hh$list=<ul/>;foreach($itemsas$item){$list->appendChild(<li>{$item}</li>);}
<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
<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);
<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>
<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);
<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>
<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 - - - - - - - - - >
<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
<divtag>Computer Research Group
ES2015 - Module System
Commonly referred to as ES6,
Provides module system
But preprocessing is required to run in the browser
<divtag>Computer Research Group
ES2015 - Module System (cont.)
//circle.jsexportfunctionareaCalc(r){constPI=Math.PI;returnPI*r*r;
}
//proc.jsimportareaCalcfromcircle;areaCale(3);//28.274333882308138
<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';
<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
<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
<divtag>Computer Research Group
Thank you
for thinking modern web with us! slides are available at http://divtag.sejong.edu
![Turisztikai mobilalkalmazás Székelyudvarhely számára · Vue.js A Vue [1] egy nyílt forráskódú JavaScript keretrendszer felhasználói felületek készítéséhez. Foként](https://img.pdfslide.net/doc/110x75/5f64ee76c388452cd2457d26/turisztikai-mobilalkalmazs-szkelyudvarhely-szmra-vuejs-a-vue-1-egy-nylt.jpg)
![Nie poznasz, że to JavaScript! [ZOBACZ SLAJDY]namekdev.net/elm-talk/elm-talk.pdf · 1. AngularJS, Angular 2 2. Vue.js + Vuex 3. Cycle.js 4. Meteor ... and disliked (implementations](https://img.pdfslide.net/doc/110x75/5f10d04c7e708231d44af13b/nie-poznasz-e-to-javascript-zobacz-slajdy-1-angularjs-angular-2-2-vuejs.jpg)
