Slides of the talk Manuel Dell'Elce gave at the HTML5 Frontend Development @L'Aquila (Italy). 13th November 2013. Speaker: Manuel Dell'Elce Abstract: L'utilizzo di Backbone.js per lo sviluppo di applicazioni web aumenta sempre più ad ogni livello, ma chiunque l'abbia usato almeno una volta sa quanto può essere frustrante e time-consuming risolvere bug tramite il classico metodo log & breakpoint. Nel talk viene introdotto un approccio alternativo al problema, presentando l'estensione Chrome "Backbone Debugger" per un debugging a livello di applicazione.

1. HTML5 Frontend Development
Debugging di applicazioni web Backbone con
Backbone Debugger

2. Manuel Dell’Elce
@Maluen0
https://github.com/Maluen/

3. Backbone Debugger
INTRODUZIONE

4. Perchè il web è così popolare?

5. Scambio di informazioni multimediali
Comunicazione e collaborazione

6. Scambio di informazioni multimediali
Accesso alle informazioni

7. Scambio di informazioni multimediali
Testo

8. Scambio di informazioni multimediali
Immagini

9. Scambio di informazioni multimediali
Audio

10. Scambio di informazioni multimediali
Video

11. Dove porta tutto ciò?

12. Le applicazioni web HTML5

13. Framework e librerie
Framework
Librerie
+ Svluppo out of the box
- Learning curve maggiore
- Flessibilità
+ Flessibilità
+ Learning curve minore
- Molte decisioni da
prendere
- Sviluppo di funzionalità
«base>
VS

14. Backbone App
Views
Models
DOM Magagement
Collections
Routers
URL Change
Usato a livello di produzione da attori quali
14

15. Problema
I debugger dei browser sono orientati a livello del
codice eseguito e non dell’applicazione Backbone
rappresentata:
15

16. Una possibile soluzione:
«Backbone Debugger»
16

17. Installazione e codice sorgente
• Installazione (Chrome Web Store):
http://bit.ly/1ePQ1DV
• Codice sorgente e sviluppo (GitHub):
http://www.github.com/Maluen/Backbone-Debugger/

18. Backbone Debugger
DEMO!

19. Backbone Debugger
REALIZZAZIONE

20. L’estensione Chrome

21. Pagina ispezionata
App: l’applicazione
Backbone eseguita.
Backbone Agent: raccoglie
informazioni sull’App.
Javascript window object: il contesto globale utilizzato da
entrambi.

22. Backbone Agent

23. DevTools
// custom panel
chrome.devtools.panels.create("Backbone Debugger", "img/panel.png",
"panel.html");
// custom sidebar pane in the elements panel
chrome.devtools.panels.elements.createSidebarPane("Backbone Debugger",
function(sidebar) {
chrome.devtools.panels.elements.onSelectionChanged.addListener(function() {
sidebar.setHeight("35px");
sidebar.setPage("elementsSidebar.html");
});
});

24. Pannello dei DevTools

25. Pannello dei DevTools (2)

26. Elements sidebar
Eseguito ogni volta che si seleziona un elemento html

27. Content Script
// Receives messages from the inspected page and redirects
// them to the background, building up the first step towards
// the communication between the backbone agent and the panel.
window.addEventListener("message", function(event) {
// We only accept messages from ourselves
if (event.source != window) return;
var message = event.data;
chrome.extension.sendMessage(message);
}, false);
// Sends a message to the background when the DOM of the
// inspected page is ready (typically used by the panel
// to check if the backbone agent is on the page).
window.addEventListener('DOMContentLoaded', function() {
chrome.extension.sendMessage({
target: 'page',
name: 'ready'
});
}, false);

28. Background
Registra le porte di comunicazione aperte dai pannelli,
ridirezionando su di essa i messaggi ricevuti dai Content Script:
// Hash <panel tab id, panel commmunication port>
var panelPorts = {};
// Panel registration
chrome.extension.onConnect.addListener(function(port) {
if (port.name !== "devtoolspanel") return;
port.onMessage.addListener(function(message) {
if (message.name == "identification") {
var tabId = message.data;
panelPorts[tabId] = port;
}
});
});
// Receives messages from the content scripts and
// redirects them to the respective panels, completing
// the communication between the backbone agent and the panel.
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
if (sender.tab) {
var port = panelPorts[sender.tab.id];
if (port) {
port.postMessage(message);
}
}
});

29. Background (2)
Utilizza le porte di comunicazione registrate per avvisare i
pannelli degli aggiornamenti delle rispettive pagine ispezionate:
chrome.tabs.onUpdated.addListener(function(updatedTabId, changeInfo) {
if (changeInfo.status == "loading") {
var port = panelPorts[updatedTabId];
if (port) {
port.postMessage({
target: 'page',
name: 'updated'
});
}
}
});

30. Architettura
30

31. Sviluppi futuri
• Modalità alternative di visualizzazione
• Una nuova scheda con tutte le azioni dell’applicazione
• Filtrare e raggruppare i risultati visualizzati
• Personalizzazione
dell’interfaccia
tramite
file
di
configurazione globali o specifici per la singola applicazione
Oppure... Github -> New issue!