• Как устроена архитектура современного front-end приложения?

    zoonman
    @zoonman
    ⋆⋆⋆⋆⋆
    В одностраничном приложении (SPA) присутствует единая точка входа. Это загрузка основного скрипта, который будет отвечать за логику работы приложения. Это как index.php в корне веб-сайта. Ну а дальше он уже сам решает, что делать. В основной скрипт обычно включены составляющие отвечающие за маршрутизацию и загрузку других частей приложения. Вы можете представить себе SPA как набор кирпичиков с раствором в виде основного скрипта.
    Так вот эти кирпичики могут быть загружены сразу, а могут лишь в тот момент, когда они потребуется, примерно как Autoloader в Composer.

    Относительно загрузки есть несколько разных подходов.
    1. Когда грузится только загрузчик и затем остальные скрипты и шаблоны подгружаются по необходимости.
    2. Когда все (скрипты+шаблоны) собирается в огромный JS-файл. Это файл потом работает.
    3. Когда JS идет большим файлом, а шаблоны отдельно (так работает AngularJS 1).

    Есть множество различных сборщиков, например WebPack, Gulp, Brunch, Grunt. Их вариаций много, не пугайтесь.

    После начальной загрузки приложение решает, что должно быть запущено первым. Обычно это какие-то системные вещи, вроде загрузки шаблонизатора, всяких кэшей и роутера.
    Далее роутер рабирает маршрут и запускает нужный модуль (контроллер/компонент); в зависимости от фреймворка это выглядит по-разному, но суть одна и таже.
    Каждый компонент отвечает за модификацию отдельных узлов дерева состояний, которое так или иначе спроецировано на DOM. Если смотреть на бэкенд, это как подставлять в шаблон данные, только на бэкэнде это происходит в один проход, а здесь перестройка происходит сразу после изменения оригинальных данных.
    В каждом феймворке это сделано по-своему. Смысл одинаков - проекция данных на DOM.
    Данные вытаскиваются приложением самостоятельно, могут быть загружены через Ajax. У меня есть приложение, где транспорт идет через веб-сокеты. Можно даже через iframe заморочиться, это не имеет значения.
    Иногда сервер отдает страничку с изначально подготовленными данными. Это делается в разных целях, в основном для уменьшения скорости старта приложения.

    Из личного опыта скажу, что вам следует начинать с Angular 2, т.к. он сделан намного проще остальных в плане использования.
    Ответ написан
    1 комментарий
  • Все ли на самом деле плохо с Python на удаленке?

    DevMan
    @DevMan
    ибо джун на удаленке = большой менингит.
    это касается любого языка, не только питона.
    Ответ написан
    5 комментариев
  • Как устроена архитектура современного front-end приложения?

    @timda
    asp.net веб-разработчик
    Так сразу не ответишь. Почитайте Интернет, много всего. ITDVN на ютубе посмотреть можно. На хабре много интересных статей. Например, свежий, "легкий" пост https://habrahabr.ru/post/321844/

    По сути архитектура не менялась с появления скриптов в браузере. Три уровня операций в архитектуре:
    1) Верстка. Раньше были таблицы, потом стали дивы. Все писали свои библиотеки. Затем библиотеки стали выкладывать в общий доступ - появились CSS-фреймворки Bootstrap, Foundation и так далее. Стало слышно о предпроцессорах CSS - less, sass. В 2014 году Гугол выпустил свой подход к дизайну Material Design. На базе него есть масса CSS-фреймворков. Сейчас переходим на флексы, приятная вещь.
    1.2) Лет пять назад начался бум мобильного трафика со смартфонов. Поэтому появились медиа-запросы и адаптивная верстка. Я сам года полтора назад взял ксиаоми 5.5 дюймов - первое время в деревне балдел :) Важный элемент.
    2) DOM. Операции по работе с DOM. Парсинг HTML дерева. Раньше писали большие библиотеки для разных браузеров (в основном на Javascript). Модно было менять картинки в меню по наводке мыши. Потом появился jQuery, он во многом снял вопросы о кросс-браузерности. Сейчас это все переросло в JS-фреймворки. Самые популярные, насколько понимаю - Angular, React. Их много.
    3) Запросы на сервер. Когда то давно это называлось XmlHttpRequest в виде COM-объекта в IE. Потом модное слово Web 2.0. Далее - мода на Ajax. Потом появился jQuery - это правда очень хороший и качественный продукт. И опять же JS-фреймворки.
    ---
    Эти операции за последние лет 15 обросли кучей терминов и технологий. Каждый считает, что он сможет написать лучше - и делает свою систему, технологию, подход, фреймворк и так далее. Не говорю, что это плохо - может и хорошо, но бардак аццкий.

    И в серверных технологиях много нового, хотя гиганты вроде Явы, Майкрософта, Оракла - удержались. Вокруг конечно создали много всего, но ИМХО - как был PHP и ASP в Интернете, так и остались. Хотя, такие штуки как REDIS весьма полезны :)

    ЗЫ: я лично смотрю в сторону Angular 2 или React (скорее всего буду пробовать обоих) и Bootstrap 4 с флексами. Если бутстрап до апреля не забЭтится - выкину и напишу свои небольшие библиотеки, мне много не надо :) Хотя мне пока что и на ASP.NET Forms и ASP.NET MVC неплохо живется, ну jQuery конечно, Yandex MAP API, бустрапа в меру. Но у всех свои мнения :)
    Ответ написан
    2 комментария
  • Как устроена архитектура современного front-end приложения?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    1. Логика работы SPA - грузится сразу на клиент при первом обращении.
    2. По событиям (читай "кликам") - подгружается только разметка блоков и/или JSON-данные по ajax (или данные непрерывно поступают через websocket).
    3. Если функционал страницы специфический (сильно отличается от обычных): то также загружаются дополнительные JS-модули через AJAX.

    Обычно используется 3 основных составляющих:
    1. Роутер - передача управления нужному модулю на основе URI-строки.
    2. Application - код основного приложения
    3. Шаблонизатор - для вставки полученных через AJAX значений в разметку.

    Для подгрузки блоков через AJAX: https://github.com/xmoonlight/includeHTML
    Для шаблонизации данных: https://sitecoder.blogspot.ru/2017/01/rex-tiny-tem...
    Ответ написан
    4 комментария
  • Как повысить уровень программирования?

    tiabc
    @tiabc
    Бизнес-партнер и консультант по технологиям
    Хорошие разработчики постоянно развиваются и никогда не стоят на месте. Любое развитие состоит в делании дел, в решении конкретных задач и в обратной связи, которую ты получаешь от других или в результате рефлексии.

    TL;DR: Читайте книжки, делайте дела, читайте чужой код.

    Что можно начать делать прямо сейчас, чтобы стать программистом лучше?

    1. Изучайте базу. Алгоритмы, сети, криптографию, архитектуру, ос, устройство браузеров, компиляторы и т.д. Изучение подобных вещей дает понимание какие задачи бывают в реальном мире и как "большие дядьки" решают возникающие проблемы. Это кладезь инсайтов.

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

    3. Написание кода - не самая большая часть работы сеньор-девелоперов, я бы сказал. Но когда речь заходит о самом коде, нужно понимать что ты пишешь и зачем. Есть классические книжки, которые можно найти, например, в матрице компетентности программиста, есть современные, но полезные типа The Art of Readable Code, которую я очень рекомендую. Нужно читать книжки. На собеседовании я всегда спрашиваю какие книжки читал или читает соискатель и если ответ отрицательный, то это большой минус.

    4. Участвуйте в опенсорс. Там вам всегда приходится сталкиваться с образом мысли самых разных людей и кодом, который они пишут. Это учит вас читать чужой код, находить в нем ошибки и критически и аргументированно к нему относиться, предлагая свои решения. Опенсорс-разработка, так же как и книжки, дает вам тот чужой опыт, который бы вы никогда сами не получили от людей, которые часто умнее или опытнее вас в чем-то. В опенсорсе, кстати, в отличие от бизнесовой разработки, есть шанс в удовольствие писать очень качественный код, в котором в бизнесе далеко не всегда есть необходимость.

    5. Наберитесь терпения. Это не случится за один день. Думайте над именованием, разделяйте обязанности, изучайте алгоритмы и экосистему, оптимизируйте ваше рабочее место, изучайте новые технологии, читайте статьи и в течение ближайших лет регулярных усилий вы обретете новый способ мышления и будете разрабатывать поддерживаемое и надежное ПО. Легкого пути, к сожалению, нет.
    Ответ написан
    2 комментария
  • Как аргументировать начальству создание существующего проекта заново, с ноля?

    saboteur_kiev
    @saboteur_kiev Куратор тега Веб-разработка
    software engineer
    Задача сайта - выполнять свою бизнес задачу, а не демонстрировать красивый код в исходниках.

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

    Если ни то, ни другое, то с какой стати платить больше?
    Ответ написан
    11 комментариев
  • Блоги разработчиков, которые работают в больших компаниях?

    @EvgeniyCyrus
    Every day matters - девушка работает в Google, пишет много о чём, в основном о прохождении собеседований, часто публикует гостевые посты.
    Ответ написан
    1 комментарий
  • Как влиться в тренд нынешней веб-разработки?

    Мне кажется нужно осваивать технологии современные. Приведу пример случая с препроцессором. До недавнего времени верстал тоже сам без всяких препроцессоров. Смотрел некоторые видео по их использованию и думал нафига эти все переменные писать, миксины. А потом как попробовал - это так удобно. Я просто словами не могу передать на сколько удобен scss/sass с его вложенностью.
    Ответ написан
    Комментировать
  • Как быстро и эффективно освоить Node.js+Express?

    AdilA
    @AdilA
    Нравится кодить, изучаю go c echo
    Образование как самоцель не выход, нужно учится для чего то, зачем я иду в автошколу? чтобы научится ездить на машине, зачем я учу иностранный язык? чтобы это помогло мне продвинуться по карьерной лестнице, вот у меня также было, хотел изучить web программирование но пока не поставил себе цель написать проект(в моем случае knam.kz, я потом кстати умудрился его продать) ничего у меня не выходило, но как поставил себе цель сделать такой сервис так и пошло поехало...
    Ответ написан
    Комментировать
  • Принцип взаимоотношений front & backend?

    sim3x
    @sim3x
    Чаще всего так
    5 тел пилят бек, 5 фронт
    Просирают сроки напроч

    Приходит один синьйор и за два дня переписывает все с 0

    Для поисковиков нужна статичная хтмлка - ее кто-то должен рендерить
    Реакт и ко такое умеют, ангуляр также.
    Тк все там нода, то таким занимаются фронтендщики.
    Бекенду остается делать апи для всего етого хозяйства

    Если изначально рулили бекендеры, то реакты и ангуляры будут занимать нишу jQ

    В каждом (длинном) проекте все происходит по-своему

    каждая несчастливая семья несчастлива по-своему
    Ответ написан
    5 комментариев
  • Стоит ли иди в программирование, будучи инженером?

    idegree
    @idegree
    Senior Workaround Developer
    Чисто мое мнение - если тупо гнаться за зарплатой, то не стоит. Дело должно прежде всего вам нравиться, тогда всё будет. У меня в Зажопинске в 5 000 км от Москвы на восток зп в два раза больше, и это далеко не потолок.
    Вы можете пойти и за зп в программисты, делать однотипные интернет-магазины каждую неделю, но опять же очень быстро упретесь в потолок. Другое дело, если вы этим живете, если можете либо в кучу областей, либо наоборот в очень узкую, но редкую.
    Ответ написан
    Комментировать
  • Чему научиться за год до эмиграции?

    zoonman
    @zoonman
    ⋆⋆⋆⋆⋆
    Как человек, который переехал, скажу, что тот язык, который у вас уже есть - неплох.
    Качайте основной скилл - вашу профессию. You have one year to master your skills. Behance - обязательно.
    На рынке всегда спрос на хороших специалистов. Когда приедете, ищите любую позицию по профессиии, соглашайтесь на все - контракт, переезд и т.д. Главное, чтобы документы были впорядке и официально разрешали работать. Фокусируйтесь на стартапах, туда обычно идут студенты, а вы с опытом работы уже на голову выше их. Насчет языка американцы лояльны, не волнуйтесь. Обязательно привезите свои работы.

    По поводу языка - смотрите новости на английском, читайте times, смотрите сериалы. Найдите такой, какой вам интересно смотреть, начните с субтитрами, если понимаете 80% без них, смотрите без них.

    Т.к. вы точно знаете, что вы поедете, то я рекомендую вам начинать искать работу удаленно. Например так. Посмотрите на описание вакансий, прикинь справились бы или нет. Что нужно сделать, чтобы справляться? Отберите самые востребованные навыки и получите их. Как только станет известна дата переезда с точностью до недели, начните откликаться на вакансии. Можете арендовать номер через Skype, т.к. вам будут звонить, будьте готовы отвечать. К моменту переезда у вас уже будет навык прохождения телефонного интервью. И может даже вас позовут на собеседование в офис.
    На первую неделю после переезда ничего не планируйте. 8+ часов разницы во времни - это не шутки.
    Поиск работы в США занимает 3-4 месяца. Прикиньте свои расходы заранее с расчетом на то, что прийдется рассчитывать только на себя.
    Ответ написан
    2 комментария
  • Чему научиться за год до эмиграции?

    @ommunist
    Делаю и поддерживаю мультиязычные сайты
    Нужно все время этот год откладывать деньги. Чем больше, тем лучше. На втором месте - язык. Если можете написать кусок документации, уже хорошо значит у вас с языком. Получите рабочую специальность какую-то пока вы у себя, хотя бы работать с копировальным станочком ключики делать, монтажничком на строечке. Потому что если вы не звезда, вам трудно будет найти работу по специальности в первый год, из собственного опыта.
    Ответ написан
    Комментировать
  • Как быстро и эффективно освоить Node.js+Express?

    @skyhead
    Я оказался в такой же ситуации, бро!
    Большинство книг - неочём. Скринкаст Кантора - вообще неочём.
    Из всего, что я на данный момент нашёл толкового это пара курсов с udemy.
    The Complete Node.js Developer Course (2nd Edition)
    The Web Developer Bootcamp
    (они есть на рутрекере)
    Ответ написан
    Комментировать
  • Инвестиции в реальные стартапы, перспективно ли это в русскоязычных странах и на каких площадках?

    saboteur_kiev
    @saboteur_kiev
    software engineer
    "А взамен вложенных средств получать, что то вроде акций или долей, которые будут в будущем будут приносить девиденты, выше банковских депозитов. "

    ЛЮБОЙ бизнес несет риски, поэтому условие "выше банковских депозитов" не совсем корректно. Никто не даст гарантий что инвестиции вообще окупятся.
    Ответ написан
    Комментировать
  • Какие книги по техническому английскому для программирования есть?

    saboteur_kiev
    @saboteur_kiev
    software engineer
    Под "техническим английским" подразумевается достаточный уровень английского, чтобы понимать документацию и уметь загуглить и прочитать ответ на английском.

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

    Просто читайте документацию. Читайте английскую википедию, читайте справку, а английский учите вообще, а не целенаправленно технический.
    Ответ написан
    1 комментарий
  • Есть ли возможность дописать существующий класс своими свойствами?

    GavriKos
    @GavriKos
    Для такой цели отлично подходит наследование.
    Ответ написан
    Комментировать
  • Стоит ли учить программировать по старинке?

    mrusklon
    @mrusklon
    Не получается? Яростно гугли!
    я когда в школе учился , у меня на информатике учили ms офису... как же я вам завидую
    Ответ написан
    1 комментарий
  • Есть ли у вас на примете GUI библиотеки для desktop приложений на JavaScript?

    @gimntut
    По моему на лицо путаница понятий. Если нужно нативное приложение, то рендер для html'а под названием webkit/blink/gecko/trident точно не нужен. Нужен js движок V8/SpiderMonkey/Chakra, а они не такие уж и большие.
    То что в RAD 2010 называется "enhanced RTTI", в windows встроено начиная c XP и называется ActiveX. В своё время активно использовалось в VB. Причём в качестве языка до сих пор можно использовать JS (см. WSH). Только смысла в этом не много, т.к. 99% js библиотек рассчитано на работу с DOM, т.е. с webkit или другими рендерами, а значит придётся всё писать с нуля. А зачем, когда уже есть готовые библиотеки написанные на нативных языках? Поэтому или Electron и вся мощь js, или Delphi и вся мощь VCL.
    Ответ написан
    2 комментария