How To IT

2021-10-05 16:10:03 ​8 языков программирования для Android-разработчика

Android-разработчики пишут не только на Java и Kotlin: в этом посте мы разберём 8 популярных языков программирования

Java

Это официальный язык для разработки под Android, который поддерживается Android Studio и является основой для изучения Kotlin.
Вообще, когда начинаются споры о том, что лучше, Java и Kotlin, следует помнить, что Kotlin — это обёртка над Java. Чтобы понять документацию Kotlin и получить помощь в процессе разработки мобильных Android приложений, следует знать именно Java.
Основные преимущества языка:
• больше материалов и легче найти информацию;
• большое комьюнити;
• среда Android Studio изначально заточена под работу с Java;
• зная Java, легко изучить Kotlin.

Kotlin

Ещё один официальный и не менее популярный язык. Также поддерживается Android Studio, характеризуется синтаксическим сахаром и предоставляет корутины, что упрощает асинхронную работу.
Синтаксис Java заочно предполагает более громоздкий код, чем в случае с Kotlin.

Главные преимущества Kotlin в разработке под Android:
• лаконичный код;
• поддерживается Android Studio;
• предоставляет корутины;
• востребован из-за нехватки Kotlin-разработчиков.

Python

Да, энтузиастам удалось приспособить один из самых популярных языков программирования под Андроид разработку. Реализовано это с помощью Kivy и BeeWare:
1 Kivy — это open source библиотека для создания кроссплатформенных приложений, в том числе под Android и iOS.
2 BeeWare — это набор UI-инструментов для создания нативных Android-приложений.
Будем откровенны, Android-разработчик, который пишет мобильные приложения на языке программирования Python, — большая редкость. В основном это что-то для себя или проекты молодых амбициозных фирм.
Если вы знаете Python, попробовать определённо стоит.

C/C++

C-языки позиционируются как высокопроизводительные, и это важно, особенно если мы говорим о чём-то тяжеловесном вроде мобильной 3D-игры.
Но стоит сразу оговориться, что прибегнуть к Java всё-таки придётся: без этого языка вам не создать полноценное мобильное приложение. Android NDK позволит написать на C/C++ только часть приложения, например библиотеку, которую через Java можно подключить к программе.

JavaScript

А вот Android-разработка на JS более жизнеспособна.
С фреймворком React Native вы можете создавать мобильные приложения с многофункциональным мобильным UI. При этом такие программы полностью нативны, то есть не являются мобильными веб-приложениями. Всё потому, что React Native использует те же компоненты, что и простые приложения для Android.

Преимущества JavaScript:

• сборка быстрее, чем в Android Studio;
• для создания качественного UI есть flexbox;
• простая передача данных по сети с использованием API.

Dart

Flutter — относительно новая технология от Google, полноценный SDK, выпущенный в 2018 году.
По ряду параметров считается более удачным решением, чем React Native. Позволяет писать кроссплатформенные приложения, поэтому эффективен в разработке приложений для Android с общей базой кода на языке Dart.
Dart позиционируется как альтернатива JavaScript. Он компилируется в бинарный код, за счёт чего достигается высокая скорость выполнения операций. Вместо XML Dart использует так называемые деревья макетов.

Основные преимущества Dart:

• легко освоить, зная Java;
• высокая производительность программ;
• Hot Reload во Flutter — быстрая перезагрузка с сохранением состояния.

C#

Программирование на Андроид с использованием C# подразумевает платформу Xamarin. С её помощью можно создавать одну логику приложения на C# для Android и iOS.

Но, как и в случае с языком программирования Python, Андроид разработчик, пишущий на C#, — это, скорее, исключение, чем правило. Такое решение подойдёт тем, кто знает язык и хочет попробовать себя в мобильной разработке.

Несмотря на весь спектр языков, обучение Android-программированию должно начинаться с Java и Kotlin, как двух официальных языков.

#совет #ANDROID #инструменты Открыть/Комментировать

2021-10-05 15:00:50 Только приступил к проекту, а сроки уже горят и заказчик разрывает телефон?

Фичи с канала theDigiShot, однажды, спасут тебя от дедлайна! Открыть/Комментировать

2021-10-05 11:11:04 ​Игры для программистов

Кодить можно и весело. Вот немного игр для тех, кто хочет учиться кодить с интересом

CodeGym

— это интерактивная платформа обучения Java, содержащая более 600 мини-лекций и 1200 задач, помогающих учиться с нуля. Нужно учесть, что Java — один из самых популярных языков программирования для начинающих, поэтому CodeGym может стать отличным началом вашей карьеры.

Языки программирования: Java

Плюсы:

• Практичные и применимые упражнения
• Удобное сочетание теории и практики
• Дружелюбный стиль обучения, который легко понять
• Простой интерфейс
• Идеален для начинающих

Минусы:

• Только Java

Цена: бесплатный нулевой уровень, потом 49 долларов в месяц или 499 долларов в год.

------

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

Языки программирования: CoffeeScript (схож с JavaScript) и Python

Плюсы:

• Очень легко начинать и понимать основы
• Доступно для детей (от 7 лет)
• Локализация на 20 языков

Минусы:

• Иногда не хватает теории
• Только 90 уроков

Цена: начинается с 6 долларов в месяц

------

Code Hunt — это обучающая игра Microsoft Research, позволяющая изучать языки программирования C# и Java. Это браузерное приложение. Обучающиеся проходят короткий туториал по каждой части, а затем выбирают фрагменты кода, чтобы получить нужный проходной балл.

Языки программирования: Java и C#

Плюсы:

• Этот способ обучения помогает находить по-настоящему изящные решения и использовать их в своей будущей работе
• У Code Hunt есть большое дружное сообщество

Минусы:

• Слишком практично (не хватает теории)
• Нельзя пропускать уровни

Цена: бесплатно

------

CSS Diner — это простая, но забавная игра, помогающая начать освоение селекторов CSS.

Языки: CSS

Плюсы:

• Очень легко начинать и учиться
• Простой интерфейс, который быстро осваиваешь

Минусы:

• Это простая игра, помогающая изучить только некоторые аспекты CSS

Цена: бесплатно

------

Cyber Dojo — похож на реальный додзё, в котором вы практикуете и совершенствуете свои навыки. Это веб-приложение позволяет программистам и командам разработчиков обдумывать используемые в кодинге практики и достигать высоких уровней навыка, а также повышать навыки кодинга.

Языки программирования: более 35 языков программирования

Плюсы:

• Очень простой интерфейс
• Поддерживает большое количество языков программирования

Минусы:

• Не обучает добротным навыкам
• Не для начинающих (нужны хотя бы базовые навыки)
• Ограниченное количество задач

Цена: бесплатно (возможны пожертвования).

#совет #код Открыть/Комментировать

2021-10-05 10:05:11 Yet another backend digest — новый небольшой новостной дайджест: статьи, видео и митапы про Kotlin/Java и мир бекенда.
Делают такой обзор раз в неделю по пятницам.
Подписывайся! Открыть/Комментировать

2021-10-03 21:10:02 ​• Поддержка изоляции кода и стиля. Каждая команда разработчиков может выбрать себе технологию по вкусу. Как разработка, так и развертывание осуществляется очень быстро.

• Способствует непрерывному развертыванию

• Тестирование сильно упрощается; когда нужно проверить небольшое изменение, не приходится затрагивать все приложение.

• Реновация фронтенда – упрощается косметическое обновление

• Повышенная надежность и удобство в поддержке

Заключительные замечания

Вы убедитесь, что в микро-фронтендовой архитектуре как ядро кода, так и интеграция устроены невероятно просто. Одна из критически важных проблем – стандартизация принципов UI/UX. Универсальное решение – опираться на стилевое руководство, среди прочего – на Material Design, Bootstrap. Чтобы все работало гладко, нужно наладить коммуникацию в команде, разработать стандарты и правила, минимизировать трения между разными командами. Все эти практики, рекомендуемые в микро-фронтендовой архитектуре, помогают решить важнейшую проблему: масштабируемость. Бывают приложения, которые начинают разбухать, а с таким ростом сопряжены многочисленные проблемы и конфликты. Если разделить код между командами и правильно организовать его «логистику» - придет качество, будут учтены технологические тренды, а мир обогатится новыми быстрыми решениями.

#код #совет #фронтенд #HTML #JavaScript Открыть/Комментировать

2021-10-03 21:10:01 Микро-Фронтенд. Финал.

HTML-импорты

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

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

• Контейнер – это фактическая корневая точка, куда должен внедряться HTML-код вложенных приложений. Для всех вложенных приложений у него должна быть единая точка входа.

• Палитра компонентов позволяет управлять вложенными приложениями, активными в настоящий момент.

HTML-шаблоны

HTML-шаблон – это элемент, содержащий содержимое с клиентской части, которое не отображается при загрузке страницы. Давайте попробуем понять реализацию микро-фронтендовой архитектуры на примере следующего приложения, написанного на React.Js. Хорошо, когда веб-приложения разрабатываются независимо друг от друга, чтобы при изменении некоторого элемента он не блокировал и не повреждал другие. Вот почему в этом примере новое приложение React должно собираться, запускаться и развертываться отдельно, а другие приложения, с которыми ему придется обмениваться информацией – расценивать как сервисы. Так, в нижеприведенном примере создается заголовок для веб-страницы. Здесь используется React.js. Это новомодная вещь. Давайте воспользуемся create-react-app для быстрой начальной загрузки: *код*

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

Затем создадим файл под названием server.js в корне проекта; он будет запускать сервер express, а также сделаем серверный рендеринг react: *код*

Этот скрипт укореняется там, где находится элемент react (App), отображает его в строку и отправляет в HTML, прежде, чем выдать пользователю. Позже React поднимется на базе этого уже отображенного компонента. Но он работает на NodeJS, а Node JS не понимает JSX или других сравнительно новых видов синтаксиса, например, import, поэтому для транспиляции этого кода перед запуском на сервере использовался babel: npm install --dev babel-cli babel-preset-es2015

Добавляем две задачи в раздел со скриптами в package.json, чтобы это запустить: *код*

Теперь запускаем заголовок при помощи: *код*

Почему микро-фронтенды так важны?

В наше время, когда появляются все новые веб-приложения, клиентская часть все укрупняется, а важность серверной части снижается. Большая часть кода относится к микро-фронтендовой архитектуре. А монолитный подход с большими веб-приложениями не работает. Должен быть инструмент для разбиения такого монолита на сравнительно мелкие модули, действующие независимо друг от друга. Решение для этой проблемы – микросервисное устройство фронтенда. Код клиентской части пишется исключительно на чистом JavaScript и с применением любых javascript-фреймворков, с которых или на которые осуществлялась миграция.

Каковы достоинства микро-фронтендовой архитектуры?

Что ни день - изобретается новая технология для JavaScript, и число этих технологий растет как снежный ком. Иногда это может напрягать, поскольку у каждой JavaScript-технологии есть свои достоинства и недостатки. А при выборе технологии всегда стремишься к максимальной пользе и минимальным рискам. Рекомендуемые практики микро-фронтенда предполагают, что разные технологии должны применяться для разработки разных сервисов. Вот лишь некоторые достоинства такой архитектуры: Открыть/Комментировать

2021-10-02 16:00:09 ​Про микро-фронтенд. Часть 2.

Как взять на вооружение микро-фронтендовую архитектуру?

Вот как перейти на микро-фронтендовую архитектуру и реализовать микросервисное тестирование с применением веб-компонентов:

Интеграция в браузере

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

Веб-компоненты
Веб-компоненты обеспечивают создание многоразовых единиц, импортируемых в веб-приложения. Они подобны виджетам, импортируемым на любую веб-страницу. В настоящее время они нативно поддерживаются в браузерах Chrome, Opera и Firefox. Если тот или иной браузер не поддерживает веб-компоненты нативно, совместимость достигается при помощи полифиллов JavaScript. Веб-компоненты состоят из 4 элементов, которые могут использоваться отдельно или вместе

1. Собственные элементы

2. Теневая DOM

3. Импорты HTML

4. Шаблоны HTML

Собственные элементы
При помощи собственных элементов (Custom Elements) создаются собственные HTML-теги и элементы. Каждый элемент сопровождается своими CSS-стилями и скриптами. Если нужно создавать собственные теги, применять стили CSS и добавлять поведения, то это делается при помощи скриптов. Единственный требуемый стандарт – ставить дефис во избежание конфликта с новыми HTML-элементами. Например, при создании списка оформляемых заказов, в котором присутствуют как собственные элементы, так и собственные теги, получаются веб-компоненты и обратные вызовы жизненного цикла элементов. Эти обратные вызовы жизненного цикла позволяют определять поведения, специфичные для разработки компонентов. Обратные вызовы жизненного цикла, используемые с собственными элементами, таковы: *код*

Наилучший пример с собственными элементами: *код*

Собственные элементы, применяемые по умолчанию - stencil, svelte, SkateJS, AngularElements, hyperHTML, т.д.

Теневая DOM

Теневая DOM от основной DOM – это API, сочетающий HTML, CSS и JavaScript внутри веб-компонента. Когда они находятся внутри компонента, они отделены от основной объектной модели документа. Такое отделение напоминает следующую ситуацию: пользователь занимается созданием сервисов API, а потребитель сервиса API ничего не знает о его внутреннем строении, так как все, что важно для пользователя – это запросы к API. У такого сервиса нет никакого доступа к внешнему миру, за исключением запрашивания API других сервисов. Подобные возможности были представлены и в веб-компонентах. Обращения к их внутреннему поведению извне не происходит, ха исключением случаев, когда это разрешено преднамеренно. Аналогично, теневая DOM никак не затрагивает основную DOM того документа, в котором находятся компоненты. Основной способ связи между веб-компонентами – это срабатывание событий.

В третьей и заключительной части разберем импорт HTML

#код #совет #фронтенд #JavaScript Открыть/Комментировать

2021-10-01 18:05:06 ​Микро-фронтенд. Обзор архитектуры и рекомендуемые практики

Концепция микро-фронтенда – это микросервисный подход при разработке клиентской части. В настоящее время есть тенденция создавать мощное и функционально насыщенное веб-приложение, расположенное поверх микросервисной архитектуры. Со временем микро-фронтендовая архитектура становится частью приложения, зачастую ее разрабатывает отдельная команда. Эта архитектура растет, ее становится сложно поддерживать. Возникает так называемый «фронтендовый монолит». Для решения этой проблемы была сформулирована концепция микро-фронтендов.

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

Как устроен микро-фронтенд?

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

Технологическая независимость

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

Изолированность кода, создаваемого разными командами

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

Создание командных префиксов

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

Нативные возможности браузера предпочтительнее созданных вами API

Для коммуникации не пишите глобальную систему «публикация/подписка», а пользуйтесь событиями браузера. Если будет необходимость создать API для совместной работы нескольких команд, постарайтесь держать его максимально простым.

Обеспечение надежного веб-дизайна

Все фичи должны быть полезными, даже если JavaScript выполнить не удается. Чтобы улучшить воспринимаемую производительность, пользуйтесь универсальным рендерингом и прогрессивными усовершенствованиями.  

Каковы наилучшие практики, принятые в микро-фронтенде?

Различные практики, при помощи которых реализуется микро-фронтендовая архитектура:

1. Единый мета-фреймворк для SPA (одностраничных приложений) комбинирует на одной странице сразу несколько приложений без необходимости обновлять страницу; таковы, в частности, React, Vue, Angular, т.д.

2. Множество одностраничных приложений находятся по разным URL. Для приложений с разделяемой функциональностью нужно использовать компоненты NPM или Bower.

3. Обособление микро-приложений в Iframes при помощи Windows. API для отправки сообщений и библиотеки нужны для координации. IFrames разделяют API, предоставляемые их родительским окном.

4. Различные модули должны обмениваться информацией через разделяемую шину событий. Каждый модуль работает с собственным фреймворком, когда обрабатывает входящие и исходящие события.

Библиотеки компонентов, зависящие от стека главного приложения, различные компоненты и разделы приложения разрабатываются как библиотеки, после чего их «требует» главное приложение. Следовательно, главное приложение состоит из разнородных компонентов.

Во второй части, завтра, разберем остатки информации и так же дам код.

#совет #фронтенд #JavaScript Открыть/Комментировать

2021-10-01 16:00:39 Информационная безопасность, курсы, книги, подборки полезного материала для IT специалистов — https://t.me/Social_engineering Открыть/Комментировать

2021-09-30 17:00:08 ​Про веб дизайн. Часть 2.

В каком направлении развиваться веб-дизайнеру

По мере развития дизайнер или углубляется в одно из направлений веб-дизайна, или учится работать над всем продуктом, применяя знания из разных сфер.
Вот на чём может специализироваться веб-дизайнер:

UX/UI-дизайн — проектирование внешнего вида сайтов и приложений с учётом удобства для разных пользователей.

UX, сокращение от английского выражения user experience, дословно означает «опыт пользователя». Здесь внимание уделяется пользователю и тому, какое впечатление он получает от работы с интерфейсом, как переходит по страницам, достигает ли он своей цели и насколько ему сложно это сделать.

Под UI — user interface — подразумевается внешний вид интерфейса, его характеристики и оформление. Здесь важно и расположение, и размер элементов, и цветовые акценты. Потому что в первую очередь нужно сделать дизайн удобным для пользователя.

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

Создание микровзаимодействий и моушн-дизайн. Микровзаимодействия — это короткие анимации на сайте или в приложениях, которые возникают в виде реакции на действия пользователей.

Брендинг и создание логотипов. Помимо хорошего сайта, компании просят создать логотип, фирменный стиль. Чтобы работать в этом направлении, нужен творческий подход и умение рисовать.

Некоторые дизайнеры становятся аналитиками, проводят A/B-тесты на готовых продуктах, устраивают интервью с пользователями, задают вопросы клиентам, чтобы сделать продукт лучше.
Продуктовые дизайнеры не специализируются на определённой области, а стараются узнать обо всём. Они работают над продуктом в целом, тестируют идеи и гипотезы, составляют прототипы, создают дизайн и собирают мнения.

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

#советы Открыть/Комментировать