На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> Backbone в действии, BackboneJS
    Халло это снова я! :D

    Ща буду учиться писать небольшие приложения на Backbone.
    Немного поучил матчасть и теперь чую в себе увереность что могу ченить нафигачить.
    Итак пишем первый проект под название Simple Blog.

    Ждите скоро все будет! :D
      Да дай ты ему умереть спокойно. Ты бы ещё prototypejs вспомнил.
      user posted image
        Цитата Serafim @
        Да дай ты ему умереть спокойно. Ты бы ещё prototypejs вспомнил.

        может кому понадобится, ну для практики хорошо :D
          Итак набил первый вариант веб-приложения.

          Немного поясню что будет делать наше веб-приложение:
          1) Отображать список постов
          2) Добавлять новые посты
          3) Отображать комменты
          4) Добавлять новые комменты.
          ВСЕ! Для начала этого хватит! :D

          Какие технологии тут используется, так называемый full stack javascript, ну т.е. программим тока на жаваскрипт! Круто да? :D
          1) BackboneJS - это библиотека, реализующая MV* архитектуру на клиенте.
          2) Node - Javascript платформа, реализованая на движке V8 Google Chrome, для запуска нашего серверного приложения.
          3) Express - фреймворк для облегчения программирования под Node.
          4) Bourne - простая без серверная NoSQL база данных.
          5) EJS - простой серверный шаблонизатор, хотя в данном варианте приложения он почти не юзается, а юзается клиентский шаблонизатор Underscore.

          Сам Backbone юзает Underscore + jQuery поэтому в коде они также юзаются. Underscore для клиентской шаблонозации, а jQuery для манипуляций с DOM. Спросите а нафига тогда EJS тут! :blink: Ну я его юзал для передачи страницы с данными на клиент :D

          Прикреплённый файлПрикреплённый файлsimple_blog.zip (2,65 Кбайт, скачиваний: 21)

          Качайте, смотрите и задавайте вопросы, ну или критику :D

          код сервера приложения server.js
          ExpandedWrap disabled
            const express = require('express');
            const Bourne = require('Bourne');
            const path = require('path');
            const logger = require('morgan');
             
            var app = express();
            var posts = new Bourne('posts.json');
            var comments = new Bourne('comments.json');
             
            app.use(logger('dev'));
            app.use(express.json());
            app.use(express.static('public'));
             
            app.get('/posts', function (req, res) {
              posts.find(function (err, results) {
                res.json(results);
              });
            });
             
            app.post('/posts', function (req, res) {
              posts.insert(req.body, function (err, result) {
                res.json(result);
              });
            });
             
            app.get('/', function (req, res) {
              posts.find(function (err, results) {
                res.render('index.ejs', {
                  posts: JSON.stringify(results)
                });
              });
            });
             
            app.listen(3000);

          Код клиентской части (для просты все в одном файле app.js)
          ExpandedWrap disabled
            // Post model
            var Post = Backbone.Model.extend({
              defaults: {
                title: '',
                content: '',
                pubDate: new Date()
              }
            });
             
            // Post collection
            var Posts = Backbone.Collection.extend({
              model: Post,
              url: '/posts'
            });
             
            // template settings
            _.templateSettings = {
              interpolate: /\{\{(.+?)\}\}/g
            };
             
            // New post view
            var NewPostView = Backbone.View.extend({
              tagName: 'form',
              initialize({ posts }) {
                this.posts = posts;
                this.tmpl = _.template($('#newPostView').html());
              },
              render() {
                this.$el.html(this.tmpl());
                return this;
              },
              events: {
                'click button': 'createPost'
              },
              createPost() {
                this.posts.create({
                  title: $('#title').val(),
                  content: $('#content').val(),
                  pubDate: new Date()
                });
                this.el.reset();
                return false;
              }
            });
             
            // Post list view
            var PostListView = Backbone.View.extend({
              initialize({ $main }) {
                this.$main = $main;
                this.listTmpl = _.template($('#postListView').html());
                this.itemTmpl = _.template($('#postListItemView').html());
              },
              render() {
                this.$el.html(this.listTmpl());
                var $ul = this.$el.find('ul');
                this.collection.forEach(post => {
                  var itemHtml = this.itemTmpl(post.toJSON());
                  $ul.append(itemHtml);
                });
                return this;
              },
              events: {
                'click #newPost': 'newPost',
                'click #viewPost': 'viewPost'
              },
              newPost() {
                var np = new NewPostView({
                  posts: this.collection
                });
                this.$main.html(np.render().el);
                return false;
              },
              viewPost() {
                console.log('viewPost');
                // TODO:
                return false;
              }
              }
            });

          Код index.ejs (для оформления юзал bootstrap, а библы брал с CDN):
          ExpandedWrap disabled
            <!DOCTYPE html>
            <html lang="en">
              <head>
                <meta charset="utf-8">
                <title>BackboneJS In Action</title>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js" charset="utf-8"></script>
              </head>
              <body class="container">
                <h1>Simple Blog</h1>
                <div id="main"></div>
             
                <!-- view templates -->
                <template id="postListView">
                  <ul></ul>
                  <hr>
                  <div class="">
                    <a href="/posts/new" id="newPost">New post</a>
                  </div>
                </template>
                <template id="postListItemView">
                  <li><a href="/posts/{{ id }}" id="viewPost">{{ title }}</a></li>
                </template>
             
                <template id="newPostView">
                  <div class="form-group">
                    <label for="title">Title</label>
                    <input class="form-control col-sm-8" type="text" id="title" placeholder="post title here">
                  </div>
                  <div class="form-group">
                    <label for="content">Text</label>
                    <textarea class="form-control col-sm-8" id="content"></textarea>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-primary">Post</button>
                  </div>
                  <hr>
                  <div class="">
                    <a href="/">All Posts</a>
                  </div>
                </template>
             
                <!-- app code -->
                <script src="/app.js" charset="utf-8"></script>
                <script>
                  var posts = new Posts(<%- posts %>);
                  var plv = new PostListView({
                    collection: posts,
                    $main: $('#main')
                  });
                  $('#main').html(plv.render().el);
                </script>
              </body>
            </html>

          Файл конфигурации package.json:
          ExpandedWrap disabled
            {
              "name": "simple-blog",
              "version": "1.0.0",
              "description": "",
              "main": "server.js",
              "dependencies": {
                "express": "^4.16.2",
                "bourne": "^0.4.0",
                "ejs": "^2.5.7"
              },
              "devDependencies": {
                "nodemon": "^1.15.1"
              },
              "scripts": {
                "test": "nodemon server"
              },
              "author": "",
              "license": "ISC"
            }


          Чтобы все заработало надо установить Node.js, открыть консоль и перейти в папку simple-blog, набрать npm install.
          Затем откройте броузер и введите localhost:3000. Но перед этим в консоли запустите сам сервер приложения командой npm test
          Сообщение отредактировано: Cfon -
            Залил на GitHub теперь как белый человек :D
            https://github.com/Cfon/simple-blog
              О, даже с ридми, ну ты прям растёшь :D
              user posted image
                Цитата Serafim @
                О, даже с ридми, ну ты прям растёшь :D

                Стараемся :D

                Добавлено
                Обнаружил косяки в app.js:
                ExpandedWrap disabled
                  var NewPostView = Backbone.View.extend({
                    tagName: 'form',
                    initialize({ posts }) {
                      this.posts = posts;
                      this.tmpl = _.template($('#newPostView').html()); //<--  тут
                    },
                    ...

                следует переписать на
                ExpandedWrap disabled
                  var NewPostView = Backbone.View.extend({
                    tagName: 'form',
                    tmpl: _.template($('#newPostView').html()), //<--  переносим сюда
                    initialize({ posts }) {
                      this.posts = posts;
                    },
                    ...

                кто не в теме Backbone поясню предыдущий код создавал свойство tmpl на каждом экземпляре объекта, в исправленой версии tmpl создается в прототипе, т.е один раз, что естестно экономично по памяти :D

                ПС. Добавил обработку viewPost см на GitHub.
                Код получился довольно путаным, но я это исправлю в следущей ревизии используя Backbone.Router это своего рода контролер в архитектуре MVC Backbone.
                Сообщение отредактировано: Cfon -
                    Предыдущий пример многому научил, но там есть косяки, какие? Сами найдите :D
                    Следующий пример будет называться Simple Borisgram :writer:
                    Почему Borisgram? Просто у меня есть кот его зовут Борис :D
                    Сообщение отредактировано: Cfon -
                      Начну с описания программы Borisgram, значит что она будет делать, по большому счету тоже самое что и предыдущий :D
                      1) отображать фото
                      2) загружать фото
                      3) комментировать фото

                      потом он будет расширен до возможости работать с множеством аккаунтов, пока же это будет для одного юзверя.

                      В данном примере я буду юзать тоже что и в предыдущем примере, ну а что вы хотели надо оттачивать приемы :D
                      1) Backbone (MVC)
                      2) Underscore (client template engine)
                      3) Bootstrap 4 (UI)
                      4) Node-Express (app server)
                      5) EJS (server template engine)
                      5) Bourne (DB)

                      Ждите я уже начал писать код, и выложу его сюда как обычно и GitHub.
                      Со мной вы станете супер-пупер жавапрограммером! :blush:
                      Сообщение отредактировано: Cfon -
                        Написал загрузку файлов на сервер

                        https://github.com/Cfon/borisgram

                        Следующий шаг отображение загруженных фото.
                        Сообщение отредактировано: Cfon -
                          Добавил просмотр фото, следующий шаг организовать многопользовательский режим, т.е. добавить аутентификацию.
                            Новая версия simple-blog-v2 где юзается Backbone, ES6 и webpack! Все как у белых людей :D

                            Прикреплённый файлПрикреплённый файлsimple_blog_v2.zip (7,04 Кбайт, скачиваний: 11)

                            ПС. Borisgram я не забросил, уже давно закончил просто не выкладывал :D
                            Сообщение отредактировано: Cfon -
                            1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
                            0 пользователей:


                            Рейтинг@Mail.ru
                            [ Script Execution time: 0,1251 ]   [ 18 queries used ]   [ Generated: 23.10.18, 16:09 GMT ]