TypeScript — язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.

Разработчиком языка TypeScript является Андерс Хейлсберг (англ. Anders Hejlsberg), создавший ранее Turbo Pascal, Delphi и C#.

TypeScript является обратно совместимым с JavaScript и компилируется в последний. Фактически, после компиляции программу на TypeScript можно выполнять в любом современном браузере или использовать совместно с серверной платформой Node.js. Код экспериментального компилятора, транслирующего TypeScript в JavaScript, распространяется под лицензией Apache. Его разработка ведётся в публичном репозитории через сервис GitHub.

TypeScript отличается от JavaScript возможностью явного статического назначения типов, поддержкой использования полноценных классов (как в традиционных объектно-ориентированных языках).

Mapbox является американским поставщиком пользовательских онлайн-карт для веб-сайтов и приложений. С 2010 года он быстро расширил нишу пользовательских карт, в ответ на ограниченный выбор, предложенный поставщиками карт, такими как Google Maps. На данный момент остается достойным продуктом на фоне большого количества конкурентов.

• Официальный сайт

Deck.gl это платформа на базе WEB API WebGL для визуального исследовательского анализа больших наборов данных (не только для визуализации географических данных). Создана и поддерживается Uber. Изначально разработана с использованием Mapbox. Также поддерживаются Google Maps, но возможности будут ограничены.

• Официальный сайт

Теперь мы можем переходить к практике, которую разделим на несколько пунктов. Напомню, что для реализации поставленных задач будем использовать React.

1. Отображение карты

Для начала нам нужно зарегистироваться на сайте Mapbox и в личном кабинете получить токен. Он понадобится для работы с картами в проекте.

NodeGUI — фреймворк, который позволяет писать нативные кроссплатформенные десктопные приложения. Под капотом он использует Qt для отрисовки интерфейса.

Есть возможность подключить React или Vue.

Также существует имплементация с Angular от irustm.

Эта статья будет опираться именно на версию с React.

Запуск и настройка

Сначала необходимо установить cmake.
Склонируем готовый шаблон от разработчиков и запустим его.

npm install
npm run dev
npm start

Чтобы приложение пересобиралось каждый раз, как в код вносятся изменения, к компоненту app подключается hot reload.

if (module.hot) {
 module.hot.accept(['./app'], function () {
   Renderer.forceUpdate();
 });
}

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

К тому же, указанный компонент обязательно должен быть классовым (только app, любые его дочерние компоненты могут быть функциональными).

Приветствую! Поговорим о Vue.js? Эта статья будет наиболее подходящей для людей уже знакомых с React. Также в этой статье я не буду пытаться быть объективным, а всего-навсего поделюсь своими впечатлениями и мыслями от достаточно молодого и прогрессивного фреймворка Vue после достаточного длительного использования React в качестве основного инструмента. Еще мы с вами посмотрим как может выглядеть совершенно простое Todos приложение на Vue, познакомившись с некоторыми его основами.

Для начала давайте посмотрим на динамику развития фреймворка, взятого из соответствующего исследования о популярности front-end инструментов:



Вышеприведенный график построен с использованием возможностей проекта NPM Trends. Здесь показано изменение количества загрузок соответствующих пакетов с течением времени. В частности, на нашем графике представлены данные за 6 месяцев 2020 года. Тут хорошо видно то, что React, по исследуемому показателю, значительно обходит конкурентов. А количество загрузок Vue, с другой стороны, постепенно растёт и сейчас находится в районе полутора миллионов.

Это неспроста, ведь Vue в качестве основных преимуществ располагает высокой скоростью, низким порогом вхождения и, что меня больше всего привлекает, лаконичной и приятной структурой. React — это мощный и замечательный инструмент, однако вы вряд ли сможете найти хотя бы 2 одинаково структурированных проекта на этом фреймворке. Да, разработчик способен довольно гибко определять архитектуру и подходы к написанию приложений, но всегда ли это хорошо? Наш сегодняшний герой позволит вам не допускать путаниц и каких-то проблем с тем, когда вы, например, садитесь на новый проект. Давайте посмотрим на Vue в деле. Я буду представлять уже готовый код приложения с пояснениями. Как установить фреймворк и создать приложение вы можете узнать из официальной документации.

Для начала установим webpack, делается это с помощью команд:

yarn add webpack webpack-cli -D, если используете менеджер пакетов yarn
npm i webpack webpack-cli --save-dev, для менеджера пакетов npm

Настраивается Webpack с помощью конфигурационного файла webpack.config.js, который хранится в корневой директории проекта.

Пример конфигурационного файла:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

Начальная конфигурация представляет собой следующее:

• watch — заставляет webpack отслеживать изменения в файлах и заново выполнять сборку;
• entry — Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта;
• output — Указывает путь, где будет располагаться создаваемый файл и как он будет называться;

Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.

yarn add webpack-dev-server для менеджера пакетов yarn или
npm i webpack-dev-server если используется npm

Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.

Параметры для webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта:

"start": "webpack-dev-server --mode development",

и скрипт для сборки билда:

"build": "webpack --mode production"

Загрузчики

Загрузчики (loaders) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».

Краткое описание технологии

Websocket — это протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени.

Для установления соединения WebSocket клиент и сервер используют протокол, похожий на HTTP. Клиент формирует особый HTTP-запрос, на который сервер отвечает определенным образом.

Примечания

Несмотря на «похожесть» новых запросов и ответов на запросы и ответы протокола HTTP, они таковыми не являются. Например, в запросе есть тело, но в заголовках поле «Content-Length» отсутствует (что нарушает соглашения HTTP). Подробнее об этом можно прочитать в Википедии.

Одним из главных преимуществ технологии — это ее простота. На клиенте и сервере есть всего 4 события для обработки:

1. connection
2. error
3. message
4. close

Почему Websocket?

Кроме ws существуют еще два способа непрерывной передачи данных: Server-Sent Events (SSE) и Long Polling.

Приведем сравнения механизмов непрерывной связи сервера и клиента, а также сделаем выводы, почему стоит (или не стоит) использовать вебсокет.

Что такое Grid?

Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.

Поддержка браузерами

В 2020 году поддержка браузерами достигает 94 %

Grid контейнер

Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.

CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.

Свойство CSS grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.

Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.

Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.

С помощью свойства grid-area мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.

Необходимость работы с нативной частью приложения React Native обычно возникает тогда, когда какой-либо сервис не имеет специального api для RN. Таким образом, хороший разработчик должен уметь, как минимум, представление того, как работает нативная часть приложения. В данной статье будут приведены примеры работы взаимодействия приложения React Native c Android.

Нативный модуль

Для начала создадим новый класс в папке android/app/src/main/java класс CustomModule:

package com.awesomeproject;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.Map;
import java.util.HashMap;

public class CustomModule extends ReactContextBaseJavaModule {
    CustomModule (ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @Override
    public String getName() {
        return "CustomModule";
    }

    private static ReactApplicationContext context;
}

Данный класс содержит обязательный метод getName(). Именно по тому имени, который вернет данный метод можно получить доступ к нативному модулю из кода Javascript (об этом далее).
Обратим также внимание на то, что конструктор класса принимает контекст приложения в качестве аргумента. Контекст приложения необходим, когда мы хотим взаимодействуем с компонентами Android.

Создадим метод класса CustomModule, который будет вызываться из кода Javascript:

@ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(context,"Hello world", Toast.LENGTH_LONG).show();
    }

Заметим, что для того, чтобы метод был доступен в RN, необходимо использовать декоратор “@ReactMethod”.

С полным кодом можно ознакомиться по ссылке.

Сегодня мы будем разрабатывать телеграм бота на node js, который умеет выводить статистику зараженных коронавирусом по всем странам.

Прежде всего в контакт-лист телеграмма нужно добавить @botFather и написать ему команду /newBot. Далее задаем имя нашего бота и, если оно не занято, придумываем идентификатор бота, по которому его можно будет найти.


Вот и все, наш телеграмм бот готов и botfather поделился с нами API Token, благодаря которому мы сможем управлять ботом

Далее создадим новый проект, введем npm init и добавим файл bot.js в котором будет разрабатываться наш бот.

Сегодняшняя статья будет посвящена разработке программы на Go, использующей API vk.com для авторизации и загрузки данных о пользователе.

Сейчас найти современный сервис, который бы не использовал авторизацию по OAuth практически невозможно. Существует большое количество сценариев использования этого протокола. Попробуем же написать простой клиент для работы с этой технологией на Go.

Сегодня мы будем разрабатывать приложение на Golang + GraphQL.

Мы часто используем GraphQL на своих проектах и знаем о нем немало, использовали его вместе с различными языками программирования: Javascript, Ruby и теперь руки дошли и до того чтобы попробовать связку Golang GraphQL.

Сегодня мы будем разрабатывать desktop приложение на Golang

Разработка golang desktop приложения — не совсем типичная задача для golang программиста.

Всем привет, в этой статье мы рассмотрим небольшой пример кода, написанный для сбора данных с сайта на популярном сегодня языке программирования Go.

Эта статья будет особенно интересна тем, кто много слышал о Go, но пока еще не попробовал его самостоятельно.

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

Мы любим пробовать новое, и поэтому часто делимся ссылками на интересную информацию из мира IT и программирования со своими коллегами. Мы являемся давними пользователями slack и для таких ссылок у нас есть отдельный образовательный канал, где каждый может найти для себя что-то интересное. Но так как мы обычные люди, периодически в пылу работы мы забываем о том, что нам надо делиться этими ссылками, и активность в канале затухает, хотя у многих из нас есть чем поделиться.