Внимание

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

А тут много мелкого и непонятного текста, который все равно никогда обычно не читают. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

JavaScript

Новая надежда

Давным-давно, в недалеком мире Web-разработки...

И зачем нужны эти
JS фреймворки ?

Ведь падающий снег на страницу можно и без них добавить

2004 год

На свет появлется DOJO Toolkit

https://dojotoolkit.org

Back to the future

Dojo использовал require задолго до появления Browserify

И да, в нем были компоненты !!

<script>
dojo.require(”dojo.widget.Editor2”);
</script>

<!-- ... -->

<textarea dojoType=”Editor2”>
 ...
</textarea>

Пакеты, предоставляемые Dojo в то время

  • dojo.collections — набор полезных структур данных (список, очередь, множество, стек, словарь и т. д.);
  • dojo.crypto — API для шифрования данных (Blowfish, MD5, Rijndael, SHA);
  • dojo.date — функциональность для работы с датами;
  • dojo.dnd — API для реализации drag&drop;
  • dojo.event — API для обработки событий с поддержкой AOP и topic/queue-функциональности;
  • dojo.lfx — набор всевозможных специальных эффектов как для HTML, так и для SVG;
  • dojo.io — различные варианты ввода-вывода, включая cookies и IFrame;
  • dojo.lang — пакет существенным образом дополняет базовые возможности языка JavaScript, добавляя closure based functions и т. д.;
  • dojo.logging — мини-framework для управления авторизациями;
  • dojo.math — основные математические манипуляции (curves, points, matrices);
  • dojo.reflect — пакет, реализующий reflection routines;
  • dojo.storage — пакет, отвечающий за офлайновое хранение данных на клиентской стороне;
  • dojo.string — пакет позволяет делить строки, менять их кодировку и многое другое с помощью простых функций;
  • dojo.undo — менеджер для undo-функциональности;
  • dojo.uri — пакет для работы с URI;
  • dojo.widget — пакет, позволяющий создавать HTML/JavaScript-компоненты, которые затем можно включать с помощью простых тегов;
  • dojo.xml, dojo.dom — два пакета, которые намного упрощают манипуляции с DOM и XML;
  • dojo.style — позволяет легко манипулировать данными в CSS (доступ к размерам и т. д.).

2006 год

JQuery

<div id="app">
  <h1>{{ message }}</h1>
</div>
R2-D2 
<div id="app">
  <h1>{{ message }}</h1>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: () => ({
    message: 'Hello R2-D2!'
  })
})
</script>
R2-D2 
<template lang="pug">
#app: h1 {{ message }}
</template>

<script>
export default {
  data: () => ({
    message: 'Hello R2-D2!'
  })
}
</script>
R2-D2

Vue VS React

React
class Timer extends React.Component {
  constructor (props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick () {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount () {
    this.interval = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount () {
    clearInterval(this.interval);
  }

  render () {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}
Vue
<template>
<div>Seconds Elapsed: {{ secondsElapsed }}</div>
</template>

<script>
export default {
  data: () => ({
    secondsElapsed: 0
  }),
  methods: {
    tick () { this.secondsElapsed += 1 }
  },
  mounted () {
    this.interval = setInterval(this.tick, 1000)
  },
  destroyed () {
    clearInterval(this.interval)
  }
}
</script>
React
import Remarkable from 'remarkable'

class MarkdownEditor extends React.Component {
  constructor (props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {value: 'Type some *markdown* here!'};
  }

  handleChange () {
    this.setState({value: this.refs.textarea.value});
  }

  getRawMarkup () {
    var md = new Remarkable();
    return { __html: md.render(this.state.value) };
  }

  render () {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}
Vue
<template>
<div class="MarkdownEditor">
  <h3>Input</h3>
  <textarea v-model="value" />
  <h3>Output</h3>
  <div v-html="rawMarkup" />
</div>
</template>

<script>
import Remarkable from 'remarkable'

export default {
  data: () => ({
    value: 'Type some *markdown* here!'
  }),
  computed: {
    rawMarkup () {
      const md = new Remarkable()
      return md.render(this.value)
    }
  }
}
</script>

Vue преимущества основные

  • Простота

  • Низкий порог вхождения

  • Быстродействие

  • Небольшой вес (26К в сжатом виде)

github.com/sms-system

t.me/astfrontend @SmS_SysteM