В предыдущей серии (Как слямзить Хабр по-быстрому) запустил проект на базе Create React App (CRA). Но это SPA, что не очень подходит, когда требуется индексация в поисковиках. Нужен Server Side Rendering (SSR). И желательно из коробки, а не на коленке. Крайне расточительно тратить ресурсы на самостоятельную разработку базовых технологий. Как выбирать платформу с поддержкой SSR? На практике, конечно, POC. Попробую реализовать CRUD с формой ввода на Material-UI, рассматривая кандидатов: React Starter Kit (RSK), NEXT.js и Electrode (не путать с Electron).
Software Engineer
Эврика! Моменты озарения при изучении React
![image](https://habrastorage.org/files/9a4/67d/9f2/9a467d9f2b2142da9cb1e31e556e1f6b.png)
Одна из моих главных преподавательских задач — сделать так, чтобы у людей чаще случались моменты озарения. «Эврика!» — это момент внезапного прояснения, когда ранее непонятные факты вдруг обретают смысл. Такое случалось с каждым. Я знаком со многими преподавателями и лучшие из них умеют так преподносить урок, чтобы озарение у учеников возникало намного чаще.
Создаем дизайн-систему
![](https://habrastorage.org/files/73a/1a4/ceb/73a1a4ceb824428e91e8fe8c26257ee5.png)
Что такое дизайн-система?
Ни для кого не секрет, что дизайнеры любят хорошие UI-киты. Но, по моим наблюдениям, в последнее время все больше внимания уделяется не просто наборам инструментов и руководствам по стилю, а созданию систем, которые связывают воедино целые продукты. Компании вроде Shopify и Intercom формируют особые команды, которые занимаются только и исключительно дизайн-системами. Люди начинают осознавать, как важен системный подход в дизайне. Это внушает оптимизм. Кто знает, возможно, в один прекрасный день появится инструмент для дизайнеров, который не будет предполагать, что в каждом новом проекте мы начинаем все с нуля.
Больше, чем React: Почему не следует использовать ReactJS для сложных интерактивных фронтенд-проектов
React — отличный инструмент для реализации простых интерактивных веб-сайтов. Но насколько он применим в сложных фронтенд-проектах? Работает ли он там столь же хорошо?
В этой статье мы рассмотрим некоторые проблемы, с которыми можно столкнуться при использовании React во время веб-разработки. Также вы узнаете, почему автор статьи решил разработать новый фреймворк на Scala, благодаря которому удалось сократить количество строк кода с 30 тысяч (на React) до одной тысячи.
React + mobx путь с нуля. Mobx + react, взгляд со стороны
![](https://habrastorage.org/files/201/f0f/c08/201f0fc084fa4c3396583e4ae3cbd5a7.jpg)
В «настоящих» проектах мы получаем данные от сервера или пользовательского ввода, форматируем, валидируем, нормализуем и производим другие операции над ними. Всё это принято считать бизнес логикой и должно быть помещено в Model. Так как react — это только треть MVC пирога, для создания пользовательских интерфейсов, то нам потребуется еще что-то для бизнес логики. Некоторые используют паттерны redux или flux, некоторые — backbone.js или даже angular, мы же будем использовать mobx.js в качестве Model.
О функциональном программировании в фронтенде
Фильтрация и создание цепочек в функциональном JavaScript
![](https://habrastorage.org/files/0ba/6fd/4e0/0ba6fd4e0c4c4f6498160e49b7737b1a.png)
Предлагаем перевод статьи, которая позволит освежить свои знания по теме, а также будет полезна новичкам в JavaScript, пока ещё осваивающим этот язык.
Одна из вещей, которая многим нравится в JavaScript, это его универсальность. Этот язык позволяет использовать объектно-ориентированное программирование, императивное, и даже функциональное. И можно переключаться с одной парадигмы на другую в зависимости от конкретных нужд и предпочтений.
Хотя JavaScript поддерживает методики функционального программирования, он не оптимизирован для полноценного использования этой парадигмы, как Haskell или Scala. Не обязательно добиваться того, чтобы ваши JS-программы полностью соответствовали концепциям функционального программирования. Но их применение помогает поддерживать чистоту кода и концентрироваться на создании архитектуры, которая легко тестируется и может использоваться в нескольких проектах.
Насколько гибкими являются наши знания в области операторов Rx?
И вот я тоже решил присоединиться к этому течению, освоить и начать применять в своих проектах RxJava. В процессе чтения нескольких книг и статей все было абсолютно понятно. «Эти знания и правда в разы укоротят код и придадут читабельности» — думал я. Но как только книги были закончены и я сел переписывать свой проект на реактивщину — стало понятно что я не понимаю даже с чего начинать…
Еще куча времени было потрачено на практику и блуждание в операторах. Для большей эффективности я придумал себе несколько задачек, и поставил целью решить их, применяя только операторы Rx. Предлагаю вам тоже испытать свои знания!
Эволюция модульного JavaScript
![](https://habrastorage.org/files/2ce/d17/13e/2ced1713ed394e28b5d894d1679474bd.jpg)
Скорее всего, когда Брендан Айк проектировал JavaScript, он не представлял, как эволюционирует его проект спустя двадцать лет. На данный момент вышло уже шесть основных спецификаций языка, и работа над его улучшением до сих пор продолжается.
Не будем лукавить: JavaScript никогда не был идеальным языком программирования. Одним из слабых мест в JS была модульность, а точнее её отсутствие. Действительно, зачем в скриптовом языке, который анимирует падающие на странице снежинки и валидирует форму, заботиться об изоляции кода и зависимостях? Ведь всё может прекрасно жить и общаться между собой в одной глобальной области — window.
С течением времени JavaScript трансформировался в язык общего назначения, так его начали использовать для построения сложных приложений в различных средах (браузер, сервер). При этом нельзя было положиться на старые подходы взаимодействия компонентов программы через глобальную область: с ростом объёма кода приложение становилось очень хрупким. Как результат для упрощения процесса разработки создавались различные реализации модульности.
Эта статья появилась в результате общения с участниками TC39 и разработчиками фреймворков, а также чтения исходных кодов, блогов и книг. Мы рассмотрим следующие подходы/форматы: Namespace, Module, Detached Dependency Definitions, Sandbox, Dependency Injection, CommonJS, AMD, UMD, Labeled Modules, YModules и ES2015 Modules. Кроме того, мы восстановим исторический контекст их появления и развития.
Пилим каталог товаров не притрагиваясь к реляционной алгебре
Здравствуйте, меня зовут Дмитрий Карловский и я… давно не занимался бэкендом, но на днях вдруг наткнулся на мучения SbWereWolf по натягиванию ужа на ежа и не смог удержаться от соблазна сдуть пыль со своего мульти-инструмента OrientDB да оттяпать им чего-нибудь этакого.
Итак, мастерить мы сегодня будем базу данных для интернет-магазина с поиском товаров по параметрам, полнотекстовым поиском, локализацией, автоматическим формированием рубрикатора и мастера добавления товара.
Разбирать мы будем вот этот вот реляционный звездолёт:
А собирать вот такой вот графовый скворечник:
Инженер VS Программист. Или куда уходят инженеры
Сейчас я еще работаю инженером, причем по моей вузовской специальности «Радиофизика и электроника», и по профилю кафедры Антенн и Радиопередающих устройств. Но уже активно шагаю в сторону переквалификации.
Почему же я, инженер с 14 годами стажа, решил перейти в программисты?
Как вернуться в кодеры, когда за сорок
Сколько раз рассказывал коллегам и на собеседованиях. Видимо есть спрос и на Хабре. Кто-то встал перед выбором. Другой сомневается в правильности намеченного пути. Когда выгораешь, такое случается. Кому-то интересно, с чем предстоит столкнуться впереди, или сопоставить своё подобное. Поверьте, это короткая версия объёмной тоскливой истории.
Программисты не могут написать алгоритмы без помощи: ещё раз про интервью
![image](https://habrastorage.org/getpro/habr/post_images/9f8/097/604/9f8097604c05328552589a74e4b602f5.jpg)
Интернационализация (i18n) в Angular 2
React или Vue? Выбираем библиотеку для фронтенд-разработки
![](https://habrastorage.org/files/972/e17/ad1/972e17ad1ca1483f871a869510905a97.jpg)
Сегодня мы поговорим о React.js и Vue.js. Это – одни из самых популярных JavaScript-библиотек в мире. Взгляните на этот список, посмотрите их репозитории на GitHub. И та, и другая обладают впечатляющими возможностями и служат для создания пользовательских интерфейсов. Работать с ними довольно просто, главное – сразу понять, что к чему, сделать правильный первый шаг. Собственно говоря, этому вот первому шагу в разработке с использованием React и Vue и посвящён данный материал.
Современный JavaScript или как сделать ваш Redux-модуль готовым к переиспользованию
![](https://habrastorage.org/files/12b/908/fcd/12b908fcd9f54e6691de5517e24e8b73.jpg)
Если мы хотим переиспользовать нашу функцию-редьюсер для нескольких экземпляров конечного редьюсера, то мы сталкиваемся с проблемой.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №251 (20 — 26 февраля 2017)
Elixir и Angular 2 безо всяких Hello, world!, или Реализуем работу с древовидным справочником, часть 1
Функциональный язык программирования Elixir набирает популярность, а один из последних фреймворков для создания одностраничных приложений — Angular 2 — недавно вышел в релиз. Давайте познакомимся с ними в паре статей, создав с нуля полноценный back-end на Elixir и Phoenix Framework, снабжающий данными клиентское приложение-frontend на базе Angular 2.
Hello, world
— не наш вариант, поэтому сделанное при необходимости можно будет применить в реальных проектах: весь представленный код выложен под лицензией MIT.
Объем статьи большой огромный! Надеюсь на столь же огромное количество комментариев — любых. Не раз замечал, что из комментариев получаешь не меньше, чем от основной статьи, а иногда и больше.
В первой статье будет несколько вступительных слов и работа над back-end. Поехали!
61 способ улучшить SEO вашего сайта
![](https://habrastorage.org/files/536/e8b/57a/536e8b57a8a24353a24deab0514869c1.jpg)
Недавно мы закончили курс по SEO в Нетологии и составили для себя чек-лист того, что обязательно нужно сделать на сайте «Я люблю ИП» для поисковой оптимизации. Но эти советы универсальны для любого проекта. В статье вы найдёте список практических рекомендаций со всего курса из 13 лекций от 8 разных специалистов, а также полезные ссылки и сервисы, которые помогут вам улучшить SEO вашего сайта.
Для кого эта статья:
- для веб-дизайнеров и разработчиков, которые хотят создавать сайты, изначально оптимизированные под SEO,
- для владельцев интернет-ресурсов, которые хотят самостоятельно разобраться в SEO, чтобы увеличить поисковый траффик.
Дисклеймер: эти советы вряд ли помогут вам выйти в топ по высокочастотным запросам, но вы сможете исправить все технические и текстовые ошибки на сайте, чтобы повысить свои позиции.
Angular — настройка среды разработки и production сборки с AOT-компиляцией и tree-shaking (Gulp, Rollup, SystemJS)
Одна из особенностей Angular, присущая и первой и новой версии — высокий порог вхождения. Новый Angular, помимо всего прочего, трудно даже запустить. А и запустив, легко получить 1-2 Мб скриптов и порядка нескольких сотен запросов при загрузке hello world страницы. Можно, конечно, использовать всякие стартеры, seed'ы или Angular CLI, но для использования в серъезном проекте нужно самому во всем разбираться.
В этой статье я постараюсь описать, как настроить удобную среду разработки с использованием SystemJS, и production сборку Angular приложения на основе Rollup, с выходом около 100кб скриптов и нескольких запросов при открытии страницы. Использовать будем TypeScript и SCSS.
Попробовать все в деле можно в моем angular-gulp-starter проекте.
![](https://habrastorage.org/files/dc0/c30/6b9/dc0c306b93f9458db1ede6a226571123.jpeg)
Information
- Rating
- Does not participate
- Location
- Химки, Москва и Московская обл., Россия
- Date of birth
- Registered
- Activity