standup (15 m)
standup (15 m)
- what did you do ?
- how did it go ?
- what would you like to know more about ?
TODAY
- Show what you made ! (20 m)
- API questions + recap (15 m)
- tools, internals, editors. (40 m)
- ----------lunch--------
- working on wiki viewer
- ask me questions in between !
- tell me if something is already clear !
Show me
what you made !
API questions + recap
tools, API service, internals.
- JSON lint, postman (10 m)
- API service (30 m)
- Javascript execution model (15 m)
some handy API tools
API service
$.get( "http://weatherAPI/data/2.5/?city=amsterdam&key=151a1f1de5", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});tip: minimize error prone -ness
API service
$.get( "http://weatherAPI/data/2.5/?city=amsterdam$key=151a1f1de5", function( data ) {
$( ".result" ).html( bata );
alert( "Load was performed." );
});spot the errors!
<html>
<head>
</head>
<body>
<div id="result">
</div>
</body>
</html>API service
var baseUrl = 'http://weatherAPI/data/2.5/';
$.get(baseUrl+'?city=amsterdam&key=151a1f1de5', function( data ) {
$( "#result" ).html( data );
alert( "Load was performed." );
});eliminate strings on several places
API service
var baseUrl = 'http://weatherAPI/data/2.5/';
var firstParam = '?city=amsterdam';
var secondParam = '$key=151a1f1de5';
$.get(baseUrl + firstParam + secondParam, function( data ) {
$( "#result" ).html( data );
alert( "Load was performed." );
});declaration and configuration > code
'declarative programming'
API service
// configuration or declaration
var baseUrl = 'http://weatherAPI/data/2.5/';
var firstParam = '?city=amsterdam';
var secondParam = '$key=151a1f1de5';
var dataContainer = '#result';
// execution
$.get(baseUrl + firstParam + secondParam, function( data ) {
$(dataContainer).html( data );
});moving towards our own API wrapper
API service
// configuration or declaration
var baseUrl = 'http://weatherAPI/data/2.5/';
var firstParam = '?city=amsterdam';
var secondParam = '$key=151a1f1de5';
var dataContainer = '#result';
var completeRequest = makeRequestOf({});
// execution
$.get(completeRequest, function( data ) {
$(dataContainer).html( data );
});moving towards our own API wrapper
API service
// configuration or declaration
var baseUrl = 'http://weatherAPI/data/2.5/';
var city = 'amsterdam';
var key = '151a1f1de5';
var dataContainer = '#result';
var completeRequest = makeRequestOf({
baseUrl: baseUrl,
key: key,
params: [
{city : city}
]
});
// execution
$.get(completeRequest, function( data ) {
$(dataContainer).html( data );
});moving towards our own API wrapper
API service
// configuration or declaration
var baseUrl = 'http://weatherAPI/data/2.5/';
var city = 'amsterdam';
var key = '151a1f1de5';
var dataContainer = '#result';
var completeRequest = makeRequestOf({
baseUrl: baseUrl,
key: key,
params: [
{city : city}
]
});
// execution
$.get(completeRequest, function( data ) {
$(dataContainer).html( data );
});
// other code
// $('.bla').on('click', function (event) {
// ...
// }what else can we improve ?
// configuration or declaration
var baseUrl = 'http://weatherAPI/data/2.5/';
var key = '151a1f1de5';
var completeRequest = makeRequestOf({
baseUrl: baseUrl,
key: key,
params: [
{city : city}
]
});
// execution
$.get(completeRequest, function( data ) {
$(dataContainer).html( data );
});main.js
weatherAPI.js
API service
// assume that weatherAPI
// gets loaded before this.
var city = 'amsterdam';
var container = '#result';
var params = {
city: city
};
getWeather(params, function(data) {
// do something with data.
$(container).html(data);
});what else can we improve ?
// configuration or declaration
var baseUrl = 'http://weatherAPI/data/2.5/';
var key = '151a1f1de5';
var getWeather = function(params, callback) {
var completeRequest = makeRequestOf({
baseUrl: baseUrl,
key: key,
params: params
});
$.get(completeRequest, function( data ) {
callback(data);
});
};
main.js
weatherAPI.js
API service
the important pattern is this:
function ('something', 25, false) {
// ...
}
function ('VeryComplexStringTheory') {
// ...
}
var someThing = 'something';
var someNum = 25;
var someBool = false;
function (someThing, someNum, someBool) {
// ...
}
var very = 'Very';
var complex = 'Complex';
var string = 'String';
var theory = 'Theory';
function (very + complex + string + theory) {
// ...
}API service
and this:
// code
// ...
// ...
// code
// abracadabra that clutters my view.
// this should be somewhere else.
// ...
// end of abracadabra
// code
// ...
// ...
// code
// deepspace continuum flux generator.
// this should also not be here.
// ...
// end of flux generator.
// code
// ...
// ...
// code
// abracadabra that clutters my view.
// this should be somewhere else.
// ...
// end of abracadabra
// deepspace continuum flux generator.
// this should also not be here.
// ...
// end of flux generator.
Javascript execution model
downloadPhoto('http://coolcats.com/cat.gif', handlePhoto)
function handlePhoto (error, photo) {
if (error) console.error('Download error!', error)
else console.log('Download finished', photo)
}
console.log('Download started')what happens first ?
console.log('this is the start');
setTimeout(function cb() {
console.log('this is a msg from call back');
});
console.log('this is just a message');
setTimeout(function cb1() {
console.log('this is a msg from call back1');
}, 0);
console.log('this is the end');what happens first ?
(also watch the creators' presentation )
Best practices and bad practices
- // comments
- indentation:
- like this.
- use
whitespace
- var a = 1;
var cb = function(c, d) {}; - function size > 25.
DO:
DON'T !
Hack your future JS API lecture 2
By michahell
