The King is dead! RIP 2006-2012

Ένα μεγάλο ευχαριστώ σε όλη την παρέα
Περισσότερα στο lexx.gr

Κάντε το site σας πιο γρήγορο χρησιμοποιώντας τον browser

17 Oct 2010 by PanosJee

Τα μηχανήματα μας πλέον είναι αρκετά γρήγορα, οι συνδέσεις επίσης, οι browser μας τείνουν να γίνουν λειτουργικά συστήματα. Απεναντίας οι servers ζορίζονται και όταν ζορίζονται πρέπει να βάλουμε το χέρι στην τσέπη. Οι διεπαφές μας γίνονται πιο πολύπλοκες και ως γνωστόν λογική μέσα στα views είναι κακό (τζιζ) και αν είσαι developer πρέπει να αντιμετωπίσεις τη διαστροφή του designer που θα σου πει, κοίτα φιλαράκι εγώ CSS και Javascript μόνο, βγάλε τα μάτια σου, πάω σπίτι! Και σαν μην έφταναν όλα αυτά έχουμε πέρα από την HTML να φτάξουμε και ένα XML, JSON api για mobile applications και λοιπά. 

Μην απογοητεύστε και μην απελπίζεστε! Ήρθε η ώρα να δώσετε στον designer να κάνει λίγη δουλειά ακόμα (δώστε του JSON που καταλαβαίνει και αφήστε τον να βγάλε το φίδι από την τρυπά ενώ εσείς πείνετε χαιρέκακα τον καφέ σας) αλλά και να γλιτώσετε λίγο cpu time και μερικά ευρώ το χρόνο και φυσικά να μη γράψετε εκείνο το api για το iPhone.

Καταρχήν ξεκινάμε με τη διαπίστωση ότι το JSON είναι πολύ πιο friendly από την XML και φυσικά πλέον omni-present. Κατά δεύτερον ας σκεφτούμε πρακτικά: μπορώ να στέλνω μια σχεδόν στατική σελίδα και τα δεδομένα μου σε json και ο χρήστης (λέγε με browser) να τα φτιάχνει αυτός locally αντί να σπαταλώ cpu cycles στους πανάκριβους servers μου; Και αν δεν είναι ο browser δε με νοιάζει, μπορεί και το iphone να καταλάβει JSON και να φτιάξει το view. Θες και API έτοιμο το έχω είτε σε λένε HTML είτε RESTful API.

Πώς γίνεται αυτό; Υπάρχουν πολλές λύσεις με αγαπημένες μου το mustache.js (σημειώστε ότι με το ίδιο data representantion μπορείτε να δημιουργείτε views μέσα από Ruby, Python, Obj-C, Erlang, Lua κλπ) και το τελευταίο fork το handlebars. To Google το κάνει αρκετό καιρό τώρα στο Gmail με τα closure-templates. Επίσης η τάση αυτή κερδίζει έδαφος με τα νέα frameworks όπως Cappuccino και Sproutcore.

Θα μας δείξεις κανά κώδικα; Βεβαίως! Δείτε ένα κουτσουρεμένο κώδικα από το SocialCaddy για να δημιουργήσουμε το address book ενός χρήστη χρησιμοποιώντας το mustache.js για τον browser και το pystache (python version) όταν δεν μπορούμε να έχουμε javascript (πχ όταν στέλνουμε email).

<!-- If there data then output some users-->
<div id="template-row">
    {{#contacts}}
        <div rel="{{ id }}" class="{{#linkedin}}linkedin {{/linkedin}} {{#gmail}}gmail{{/gmail}}  {{#facebook}}facebook{{/facebook}} contact" id="contact_{{ id }}">
        <label for="contact_{{ id }}_chk" class="checkbox" rel="{{ id }}">
            <input type="checkbox" id="contact_{{ id }}_chk" />
        </label>
            <a href="#" class="contact">
            <span class="name">{{ title }}</span>
        </div>
        {{> user_pic }}
        </div>
    {{/contacts}}
        <!-- No data no honey, display there is nothing -->
    {{^contacts}}
        No contacts found.
    {{/contacts}}
</div>  




// Find the mustache template in the template-row div and then compile it!
row_template = Handlebars.compile($('#template-row').html().replace(/{&gt;/g,'{>'));
// Give some data
[{"picture_url": "http://profile.ak.fbcdn.net/apic.jpg", "facebook": 1, "id": 1903, "regular": 1, "title": "My Cool Friend"}]
// And caboom! Get the html
html = card_template(view, {'partials': partials});

Μια διαφορετική υλοποιήση χρησιμοποιώ και στο http://vote.vfm883.gr όπου σερβίρω μια cachαρισμένη ΗΤΜL σελίδα με την playlist και μετά το sorting και λοιπά γίνονται στον browser, κοινώς κάθε φορά που αλλάζει η playlist ο server δε θα φτιάξει ποτέ την playlist με νέα σειρά απλά θα στείλει στον χρήστη τα τραγουδία και τους ψήφους. Αποτελέσμα; Ο server-side χρόνος για rendering είναι πάντα κάτω από 60ms.

Με την έλευση της HTML5 με τα websockets, threads, storage περιμένετε οι εφαρμογές (όχι τα content sites) να μεταναστεύουν σε αυτή τη λογική ή ο web browser θα είναι ένας ακόμα client για το service σας. Κοινώς τα websites πλέον θα είναι webservices.