Debugging di applicazioni web Backbone con Backbone Debugger
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Debugging di applicazioni web Backbone con Backbone Debugger

  • 1,417 views
Uploaded on

Slides of the talk Manuel Dell'Elce gave at the HTML5 Frontend Development @L'Aquila (Italy). 13th November 2013. ...

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,417
On Slideshare
1,129
From Embeds
288
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
2

Embeds 288

http://www.ivanomalavolta.com 287
http://cloud.feedly.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!