Libsapojs return

LibSAPO.js
The return of the JavaScript library

SAPO Sessions
2010-10-06
Wednesday, October 6, 2010

Tiago Rodrigues

Webdeveloper no SAPO
Equipa de JavaScript
trodrigues.net
@trodrigues


LibSAPO.js
A história e o porquê


Baseada em Prototype



Módulos necessários ao SAPO




Surgiu na mesma altura que outras libraries




Surgiu na mesma altura que outras libraries

Boom do JavaScript


Mais recentemente


Mais recentemente

A LibSAPO.js já é standalone


Mais recentemente


Não é construída sobre outra library


Mais recentemente



Pode usar alguns módulos externos


Mais recentemente



Pode usar alguns módulos externos

Segue parte da API de Prototype


Porquê a LibSAPO.js ?



Orientada às necessidades do SAPO




Não está tão dependente de libs third party





Resolução de bugs mais rápida





Resolução de bugs mais rápida

Adição de features on demand


Porque não um fork ?



Manutenção de código mais complexa




Afastamento da library original





Diﬁculdade de integração de novas features





Diﬁculdade de integração de novas features

Difícil reaproveitar componentes


Filosoﬁa


Filosoﬁa

Modularidade


Filosoﬁa

Modularidade

Performance


Filosoﬁa

Modularidade

Performance

Não reutilizar tanto código da própria library


Desvantagens


Desvantagens

API mais complexa


Desvantagens

API mais complexa

Muitos módulos para conhecer/compreender


Perguntas até agora ?


LibSAPO.js
Namespaces e API


O namespace SAPO


O namespace SAPO

Todos os módulos estão contidos neste namespace


O namespace SAPO


Variáveis globais declaradas: SAPO e s$


O namespace SAPO



Não há extensão do DOM e tipos primitivos,
excepto:


O namespace SAPO



Não há extensão do DOM e tipos primitivos,
excepto:

• Function.bindObj()
• Function.bindObjEvent()


bindObj e bindObjEvent

var obj = {
quant: 10,
add: function(){
alert(this.quant);
}
};

var add = obj.add;
add(); // undefined

var add = obj.add.bindObj(obj);
add(); // 10


bindObj e bindObjEvent

var obj = {
quant: 10,
add: function(msg){
alert(msg);
alert(this.quant);
}
};

var add = obj.add.bindObj(obj, "hello");
add(); // hello, 10


Como usar a LibSAPO.js ?

<script src="http://js.sapo.pt/SAPO/"></script>
<script
src="http://js.sapo.pt/SAPO/Utility/Dimensions/1.1/"></script>
<script
src="http://js.sapo.pt/SAPO/Component/Dialog/1.1/"></script>

<script>
(function(){
SAPO.Component.Dialog.info("hello !");

var Dialog = SAPO.Component.Dialog;
Dialog.info("hello again !");
}());
</script>


Métodos SAPO


Métodos SAPO

namespace(‘name’)


Métodos SAPO


extendObj(original, extension)


Métodos SAPO



Browser


Métodos SAPO



Browser

require(modules, callback, async)


SAPO.require

<script src="http://js.sapo.pt/SAPO/"></script>
<script>
SAPO.require(
[
'SAPO.Utility.Dimensions',
'SAPO.Component.Dialog'
], function(){
SAPO.Component.Dialog.alert('o hai !');
}
);
</script>


O namespace SAPO

Namespaces principais:


O namespace SAPO


• Dom


O namespace SAPO


• Dom
• Communication


O namespace SAPO


• Dom
• Communication
• Utility


O namespace SAPO


• Dom
• Communication
• Utility
• Component


O namespace SAPO


• Dom
• Communication
• Utility
• Component
• Eﬀects


O namespace SAPO


• Dom
• Communication
• Utility
• Component
• Eﬀects
• Widget


SAPO.Dom.Element

Métodos relacionados com DOM elements
• get/create
• oﬀset, position, size
• insert before/after
• hasAttribute


SAPO.Dom.Css

Métodos relacionados com CSS
• add/remove/has/toggle classname
• get/set style
• show/hide/toggle element
• appendStyleTag
• appendStylesheet


SAPO.Dom.Selector

Sizzle
• select(selector, context)
• matches(selector, ﬁlterSet)


SAPO.Dom.Event

Abstracção de eventos
• observe/stopObserving(element, event, callback)
• ﬁre
• stop
• element, ﬁndElement
• pointer, mouse button


SAPO.Dom.Event

SAPO.Dom.Event.observe(button, 'click', function(ev){
SAPO.Dom.Event.stop(ev);

alert("hello");
});


SAPO.Dom.Event

var obj = {
name: 'Tiago',
handler: function(ev){
alert(this.name);
}
}

SAPO.Dom.Event.observe(button, 'click',
obj.handler.bindObjEvent(obj));


SAPO.Dom.Loaded

Indica quando o DOM está carregado
Gera um evento dom:loaded


SAPO.Dom.Loaded

SAPO.Dom.Event.observe(document, 'dom:loaded', function(ev){
// do awesome javascript stuff
var el = document.getElementById("container");
});


SAPO.Communication.Ajax

new SAPO.Communication.Ajax('/url', {
parameters: { user: 'trodrigues' },
onSuccess: function(response, data){
alert(data);
}
});


SAPO.Communication.Ajax

SAPO.Communication.Ajax.load('/view.html', function(html) {
document.getElementById('container').innerHTML = html;
});


Syndication

• SAPO.Communication.Syndication
• Semelhante a JSONP
• Dar a volta à Same Origin Policy
• adiciona parâmetro jsonTag a url
• Exemplo: http://service.url/datafeed?jsonTag=varname
• servidor deve devolver var jsonTagName = {};


Syndication

new SAPO.Communication.Syndication(
'http://service.url/datafeed', {
onComplete: function(data) {
alert(data.name);
}
}
);

<script type="text/javascript">
var json6386348 = {
name: 'Tiago'
};
</script>


SAPO.Utility

Array
Cache
Cookie
Crypto
Date
Dimensions
Dumper


SAPO.Utility

Array Error
Cache FormValidator
Cookie I18n
Crypto Pagination
Date Selection
Dimensions Serialize
Dumper String


SAPO.Utility

Array Error Swf
Cache FormValidator Templating
Cookie I18n Url
Crypto Pagination Validator
Date Selection Variable
Dimensions Serialize VideoEmbed
Dumper String


SAPO.Eﬀects

• Ainda em forte desenvolvimento


SAPO.Eﬀects

• Baseado em ideias do scripty2


SAPO.Eﬀects

• Transições de CSS quando possível


SAPO.Eﬀects

• Transições de CSS quando possível
• Módulos existentes:
• Fade
• Slide


SAPO.Component

Autocomplete
ColorPicker
Contextmenu
DatePicker
Dialog
Draggable
Droppable


SAPO.Component

Autocomplete Gallery
ColorPicker Imagenote
Contextmenu Passwordmeter
DatePicker Rating
Dialog Slidebox
Draggable Tabs
Droppable Tooltip


SAPO.Widget

Widgets utilizadas em vários serviços
Base para snippets


Bundles

Concatenar e miniﬁcar uma lista de ﬁcheiros


Bundles

Menos pedidos HTTP


Bundles

Menos pedidos HTTP
Opcional, mas ajuda


Bundles

Menos pedidos HTTP
Opcional, mas ajuda
Usados internamente


Bundles

Menos pedidos HTTP
Opcional, mas ajuda
Usados internamente
Servidos de http://js.sapo.pt/Bundles/


Snippets

Semelhantes a bundles


Snippets

Inclusão de widgets em páginas


Snippets

Carregam e inicializam código necessário


Snippets

Possibilitam uso externo de widgets


Snippets

Possibilitam uso externo de widgets
Servidas de http://js.sapo.pt/Snippets/


Snippets

<script
src="http://js.sapo.pt/Snippets/Gallery-0.1.js?url=http://
services.sapo.pt/Photos/RSS2/?u=shiryu&a=3"></script>


Mais perguntas ?


Documentação

http://js.sapo.pt
API, Guias, tutorials

http://libsapojs.blogs.sapo.pt/
http://twitter.com/libsapojs


Rever SAPO Session #2

JavaScript for Beginners
http://developers.blogs.sapo.pt/7998.html

JavaScript done right
http://developers.blogs.sapo.pt/9093.html


Rever SAPO Session #2

Apresentações do Gamboa
http://www.slideshare.net/suskind


return “that’s it”;

Imagens:
http://www.ﬂickr.com/photos/delgrossodotcom/3574562862/
http://www.ﬂickr.com/photos/22746515@N02/3435112960/

Tiago Rodrigues
tiago.c.rodrigues@co.sapo.pt
http://trodrigues.net Creative Commons
Attribution
NonCommercial
@trodrigues ShareAlike 3.0


Libsapojs return

More Related Content

Featured (20)

Libsapojs return