Рубрики
Без рубрики

Django и Modern JS библиотеки – Svelte (3)

Django и современные библиотеки JS – Svelte (Примечание: эта статья изначально опубликована на CBSO … Помечено Django, Python, Svelte, JavaScript.

Django и современные библиотеки JS (3 часть серии)

(Примечание: эта статья изначально опубликована на Cbsofyalioglu.com При строительстве веб-сайтов Стамбул Частный перевод , Передача круизного порта в Стамбуле и Измир тревога Системлери Несомненно

В предыдущей части мы построили Django Backend и API GraphQL. В этой части мы будем интегрировать проект Django с Svelte.

Таким образом, необходимо следовать первой части учебника.

Что такое SVELTE и как он отличается от реагирования?

Я сказал, что мне нравится Питона и его экосистема. Мне также нравятся со временными компиляторами и языковыми медами, такие как Cython, который действительно повышает производительность Python. Когда я узнал, что JavaScript является интерпретированным языком, я пытался посмотреть эквивалент Цитона. Из-за разных компиляторов браузеров я не мог найти то, что хочу, и это сделало разочарование. Может быть, это причина, по которой я чувствую волнение, когда я даю Свелту шанс.

Если вы не попробовали Свелту раньше, вы можете дать ему шанс. Интерактивные API и учебные пособия Svelte также стоит похвалы. Быть знаком с Svelte API и учебники определенно рекомендуется.

Когда я говорю о Свелте, я строго говоря о Svelte 3. Это еще одна библиотека JavaScript, написанная Rich Harris. Что делает Svelte Special:

  • Это действительно реактивная библиотека, и она не использует виртуальный DOM, как реагировать. Следовательно, нет расчетов Diff VDOM.
  • Он имеет компилятор и при создании приложения, он производит оптимизированный код JavaScript. В конце концов, код SVELTE почти исчезает, и у вас ванильный JavaScript.
  • Вы можете написать HTML, CSS и JavaScript в одном файловом компонент, и не будет глобальных загрязнений CSS.

Да, реагировать революционер. Тем не менее, сколько раз мы должны иметь дело с проблемами синхронизации Virtual DOM или дополнительное бремя для даже очень небольших операций, находятся на другой стороне медальона.

Конфигурация SVELTE с WebPack с нуля

Шаг 1: Настройка среды разработки

(Примечание. Если вы уже установили узел, вы можете пропустить эту часть)

Мы будем использовать бэкэнд узела для среды разработки. Поэтому нам нужно установить узел и узел Package Manager NPM. Чтобы предотвратить потенциальные проблемы зависимости, мы создадим чистую среду узла. Я буду использовать NVM, который является диспетчером версии узла, и он позволяет нам создавать изолированные среды узла. В вашем терминале запустите код ниже.

Настройка узла среды с NVM

В вашем терминале запустите код ниже.

# install node version manager 
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

# check installation
command -v nvm

# should prints nvm, if it doesn't, restart your terminal

# install node
# node" is an alias for the latest version

# use the installed version
nvm use node
nvm install node

Теперь мы можем создавать каталог Frontend в Django Project. Перейдите в корневой каталог проекта. «Бэкэнд/»

В вашем терминале копируйте и вставьте код.

# create frontend directory
mkdir FRONTEND
cd FRONTEND

# now your terminal directory should be
# backend/FRONTEND 
# create a node project
npm init
# you may fill the rest

Теперь мы можем установить фронт-концевые и разработка библиотек.

# install svelte and other libs 
npm install --save-dev svelte serve cross-env  graphql-svelte

# install webpack and related libs
npm install --save-dev webpack webpack-cli webpack-dev-server

# install webpack loaders and plugins 
npm install --save-dev style-loader css-loader svelte-loader mini-css-extract-plugin

npm install --save node-fetch svelte-routing

Обновление package.json Часть сценариев, как показано ниже. Ваш файл должен выглядеть так и игнорировать версии.

{
  "name": "django-svelte-template",
  "description": "Django Svelte template. ",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "webpack-dev-server --content-base ../templates"
  },
  "devDependencies": {
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
    "graphql-svelte": "^1.1.9",
    "mini-css-extract-plugin": "^0.9.0",
    "serve": "^11.3.1",
    "style-loader": "^1.2.1",
    "svelte": "^3.22.3",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "node-fetch": "^2.6.0",
    "svelte-routing": "^1.4.2"
  }
}

Давайте создадим приложение необходимые файлы и папки для SVELTE. В корневом каталоге проекта « » Backend/’ Откройте свой терминал.

# create HTML file of the project
cd templates
touch index.html

# change directory to backend/FRONTEND
cd ../FRONTEND
mkdir src
touch index.js
touch webpack.config.js

# change directory to backend/FRONTEND/src
cd src
touch App.svelte
touch MovieList.svelte
touch MoviePage.svelte
touch api.js

Шаг 2 – Конфигурация WebPack

Что такое WebPack? WebPack – это модуль Bundler и задача. Мы подключим все наше приложение JavaScript, включая CSS Styling в два файла JavaScript, если вы предпочитаете вывести только один файл. Из-за богатых плагинов вы также можете сделать много вещей с WebPack, как сжатие с различными алгоритмами, устраняя неиспользуемый код CSS, извлечение CSS в разные файлы, загружая ваш пучок в облачный провайдер, такой как S3 etc …

Я сделал два разных параметра WebPack в одном файле. Одним из них является для развития среды развития, а другой – для производственной среды. Также обратите внимание, что мы не оптимизируем эти конфигурации.

Скопируйте/вставьте следующий код в ***** webpack.config.js ***** файл.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const isEnvProduction = mode === 'production';

const productionSettings = {
    mode,
    entry: {
        bundle: ['./index.js']
    },
    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte')
        },
        extensions: ['.mjs', '.js', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    output: {
        path: path.resolve(__dirname, '../static'),
        filename: 'js/[name].js',
        chunkFilename: 'js/[name].[id].js'
    },
    optimization: {
        minimize: true,
        runtimeChunk: false,
      },
    module: {
        rules: [
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        emitCss: true,
                        hotReload: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    /**
                     * MiniCssExtractPlugin doesn't support HMR.
                     * For developing, use 'style-loader' instead.
                     * */
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    devtool: false,
    plugins: [
        new MiniCssExtractPlugin({filename: '[name].css'})
    ],
};

const devSettings = {
    mode,
    entry: {
        bundle: ['./index.js']
    },
    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte')
        },
        extensions: ['.mjs', '.js', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    output: {
        publicPath: "/",
        filename: 'static/js/bundle.js',
        chunkFilename: 'static/js/[name].chunk.js',
    },
    devtool: 'source-map',
    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
      },
    module: {
        rules: [
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        emitCss: true,
                        hotReload: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    /**
                     * MiniCssExtractPlugin doesn't support HMR.
                     * For developing, use 'style-loader' instead.
                     * */
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    mode,
    plugins: [
    ],
}


module.exports = isEnvProduction ? productionSettings : devSettings;

Шаг 3 – Создайте одностраничное приложение со Svelte

Во-первых, заполните « » Backend/frontend/index.js ‘.

import App from './src/App.svelte';

const app = new App({
    target: document.body,
});

window.app = app;

export default app;

Далее заполните файл «app.svelte» с правильной логикой.

Перед маршрутизацией страниц я сначала напишу запросы на стороне клиента. Пожалуйста, откройте API.JS и скопируйте/вставьте код ниже.

import { GraphQLProvider, reportCacheErrors } from "graphql-svelte";

const client = GraphQLProvider({
    url: 'http://127.0.0.1:8000/graphql',
    headers: () => ({
        "content-type": "application/json",
        Accept: 'application/json'
    })
})


client.graphql.on('cache', reportCacheErrors)





// our first query will requests all movies
// with only given fields
// note the usage of string literals (`)
export const MOVIE_LIST_QUERY = `
    query movieList{
        movieList{
            name, posterUrl, slug
        }
    }
`

// Note the usage of argument.
// the exclamation mark makes the slug argument as required
// without it , argument will be optional
export const MOVIE_QUERY = `
    query movie($slug:String!){
        movie(slug:$slug){
            id, name, year, summary, posterUrl, slug
        }
    }
`

// This is generic query function
// We will use this with one of the above queries and
// variables if needed
export async function get(query, variables = null) {
    const response =  await client.get({ query , variables })
    console.log("response", response);
    return response
}

Теперь страницы маршрута: Movielist.svelte будет отображаться на домашней странице, поскольку мы определили в вышеупомянутом. Если пользователь нажимает на любую карту фильма, то файл MoviePage.svelte будет отображаться.

Заполните movileist.svelte.






    
    {#await movielist}
        loading

    
    {:then response}
        {#if response.data.movieList.length > 0}
            {#each response.data.movieList as movie}
                

                    
                        {movie.name}
                        
{movie.name}

                    
                

            {/each}
        {/if}

    
    {:catch error}
        
Something went wrong: {error.message}

    {/await}

Также заполните MoviePage.svelte в соответствии с этим.






    
    {#await moviedata}
        
Movie {slug} is loading


    
    {:then moviedata}
        {#if moviedata.data}
            

                {`${moviedata.data.movie.name}
                

                    
{moviedata.data.movie.name}

                    
{moviedata.data.movie.summary}

                

            

        {/if}

    
    {:catch error}
        
Something went wrong: {error.message}

    {/await}

Запустите приложение SVELTE в среде разработки

В среде разработки мы будем запускать два разных сервера. Когда наше приложение SVELTE запущено, он запрашивает данные с сервера Django. После того, как наступит ответ, сервер разработки WebPack Development представляет страницу с правильными данными. Это только для этапа развития.

Когда мы завершаем интерфейс разработки, мы построим и связываем приложение для клиента. После того, как тогда мы начнем Django Server, и это будет единственный сервер, который мы будем использовать в производственной среде, как я обещаю раньше.

Перейдите в корневую папку проекта Django. « * Backend/’ *

Выполните команду ниже и сделайте сервер Django Ready для запросов на передний план.

# execute it on the root folder of Django 'backend/'
python manage.py runserver

Откройте другой терминал и измените каталог на « Backend/Frontend «

# On another terminal
npm run start

Когда приложение SVELTE успешно скомпилировано, откройте свой браузер «Localhost: 8080/».

Вы должны увидеть аналогичный экран, похожий на изображение ниже.

Movileist.svelte сделает экран

Экран MoviePage.svelte сделает это, если пользователь нажимает на любую карту фильма

Что произойдет в данный момент?

На данный момент “/” Бортовая страница будет оказана. Из-за наших конфигураций маршрутизации файл movileist.svelte будет отображаться первым. Если пользователь нажимает на любую фильм, то файл MoviePage.svelte будет отображаться относительно его значения слизни.

Мы успешно интегрируем Django и Svelte. Теперь сделайте производственную сборку.

Интеграция Django и Svelte в производственной среде

Теперь вы можете остановить сервер WebPack во время Держать сервер Django elive Отказ

В каталоге Backend/Frontend выполните команду ниже.

npm run build

Это будет строить и заблокировать все ваше приложение Svelte в файле Bundle.js. Когда процесс соединения окончен, перейдите к URL-адресу сервера Django в вашем браузере. -> “127.0.0.1:8000/”

Вы должны увидеть те же экраны выше. Также обратите внимание на статическую папку, которая имеет новые файлы, исходящие из пакета WebPack.

ЗАКОНЧЕННЫЙ

Это код REPO всех трех частей.

(Примечание: эта статья изначально опубликована на Cbsofyalioglu.com При строительстве веб-сайтов Аэропорт Стамбул трансфер , Передача круизного порта в Стамбуле и Istanbul Travel Guide Несомненно

Django и современные библиотеки JS (3 часть серии)

Оригинал: “https://dev.to/canburaks/django-and-modern-js-libraries-svelte-3-4a98”

Читайте ещё по теме: