Jinja2, Backbone.js i progresywna korekta

Question

Mam działającą witrynę zbudowaną na bazie Google App Engine (silnika szablonów Python + Jinja2). Chciałbym rozpocząć przeprojektowanie go jako aplikacji pojedynczej strony przy użyciu Backbone.js i Underscore.js. Celem jest zastosowanie progresywnej strategii ulepszeń.

Strona będzie nadal renderowana przy użyciu zaplecza podczas pierwszej wizyty. A jeśli przeglądarka obsługuje JavaScript, Backbone.js przejmie kontrolę.

Postanowiłem zrobić to w ten sposób z dwóch powodów. Najpierw wszystkie linki, które już posiadam, pozostaną nienaruszone, a po drugie bot indeksujący Google będzie mógł indeksować zawartość witryny.

mam dwa problemy z tym podejściem:

1. muszę mieć dwa szablony dla prawie wszystko na mojej stronie jednej na backend (Jinja2) i jeden na frontend (underscore.js). Zastanawiam się, jakie są najlepsze praktyki w takich przypadkach? Czy jest coś, co możesz zaproponować, aby nie mieć dwóch szablonów do wszystkiego?

2. Jak załadować szablony do frontendu, aby użyć Backbone.js + Underscore.js? Mogę załadować je wszystkie w pierwotnym żądaniu lub zażądać ich asynchronicznie, kiedy będą potrzebne.

Doceniam wszelkie myśli! Dzięki.

Niektóre zasoby:

http://ricostacruz.com/backbone-patterns/

Ten jeden opisuje jak związać backbone.js do istniejącego HTML: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

Answer 1

Więc ja niedawno (w tym roku) przeszedł podobnej sytuacji. Dam ci znać na czele czasu, że # 1 to niezwykle trudna sprawa. Pamiętaj, że nie tylko będziesz musiał duplikować szablony, ale WSZYSTKIE logiki biznesowe związane z Twoją witryną. Załóżmy na przykład, że zezwalasz użytkownikom na dodawanie komentarzy do konkretnej strony. Korzystając z opisanej metody, musisz mieć szablon komentarza po stronie serwera i po stronie klienta, a dodatkowo zduplikować logikę wymaganą do dodania/usunięcia/edycji komentarza zarówno na kliencie, jak i na serwerze (do pomieścić użytkowników z i bez javascript). Powielanie szablonów jest łatwe przy użyciu bloków funkcyjnych Jinja2, ale powielenie logiki jest tam, gdzie robi się interesujące. Próbowałem to zrobić, a w kilka miesięcy później wykonałem pełny przepis.

Porady, które chciałbym ci przekazać, to idea, że ​​możesz wspierać zarówno javascript, jak i innych użytkowników javascript. Stwórz swoją stronę dla jednego lub drugiego. Osobiście wybrałem drogę javascript samodzielnie. To pozostawia dwie opcje. Stwórz aplikację na jedną stronę lub stwórz aplikację, która w znacznym stopniu wykorzystuje javascript dla funkcji, ale renderuje wszystko po stronie serwera. Prawdopodobnie istnieje wiele innych opcji, ale są to dwie najbardziej popularne, jakie widziałem. Poszedłem z drugą opcją. Więc to, co robię, to ładowanie strony początkowej jest wykonywane przez serwer. Backbone.js następnie zużywa każdy element i tworzy z nich modele i widoki. Jest to w znacznym stopniu realizowane z wykorzystaniem atrybutów data.Tak na przykład, aby utworzyć widok komentarz musiałbym element takiego:

<div class="comment" data-id="1" data-body="You Suck"></div> 

bym wtedy zużywają wspomniany komentarz i stworzyć model z nim tak:

var CommentModel = Backbone.Model.extend(); 

var comment_el = $('.comment'); 
var comment_model = new CommentModel($(comment_el).data()); 

Wreszcie poprze widok z tego stworzonego modelu, który można następnie rozszerzyć funkcjonalność serwisu:

var CommentView = Backbone.View.extend({ 
    initialize: function() {}, 
    edit: function() {}, 
    delete: function() {} 
}); 

var comment_view = new CommentView({ 
    model: comment_model 
}); 

wtedy może pojawić się pytanie: „Co zrobić, jeśli trzeba ponownie uczynić coś, nie muszę po stronie klienta szablony f albo to?" Nie. Szablony po stronie klienta to całkiem nowa sprawa. Osobiście staram się ich unikać, ponieważ nie wydaje mi się, abyśmy byli na miejscu, i zawsze uważałem, że aplikacje na jedną stronę nie są wystarczająco elastyczne, by zaspokoić moje gusta. Jestem pewien, że jest wielu ludzi, którzy nie zgadzają się ze mną w tej sprawie, ale to jest stanowisko, które podjąłem w moim najnowszym projekcie. W związku z tym renderuję wszystko na serwerze i przesyłaję html do klienta w postaci JSON, który następnie wprowadzam do DOM. Mam więc mnóstwo punktów końcowych api, które zwracają JSON do mojego kodu Backbone.js. Właśnie to dla mnie obecnie działa, ale ten problem jest zwykle zazwyczaj sytuacyjny. Musisz naprawdę spojrzeć na swoje potrzeby. Ponieważ jest to warte, w dużej mierze oparłem swój obecny system na tym, co ostatecznie zdecydował Twitter po wypróbowaniu całej aplikacji na jedną stronę. Możesz przeczytać o tym here.