На чем писать фронтенд легко и непринужденно?

Question

[Doaxan]

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

Comments

[nirvimel]

Меня всю жизнь преследует эта проблема: "Как разрабатывать GUI человеку, который ненавидит копаться в GUI?". (У меня это касается не только веб).

Answer 1

[Юрий Матюхин]

Легко и непринужденно получится писать после пары лет опыта. Проще всего для старта научиться что-то делать на html, js, css.
После этого имеет смысл накрутить инструменты и фреймворки. Я бы рекомендовал npm-scripts, webpack/rollup, postcss. Из фреймворков каждый выбирает что нравится или что востребовано. Вам рекомендую Angular 1/2 или React, с ними всегда найдете работу. Если для себя и своих проектов, то тут выбор побольше. Мне нравится Riot.
А чтобы писать «красиво и легко сопровождаемо» тут вопрос совсем не в фреймворке, а в понимании паттернов, дебагинга, проектирования, тонкостей языка и кодстайла.
Удачи.

Answer 2

[Олег Савчук]

Если Вы всю жизнь писали back-end приложений, то front-end так просто взять невозможно. Для начала я настоятельно рекомендую освоить досконально то, что является основой: HTML, CSS, JS. Затем, когда основа будет положена, рекомендую промониторить рынок IT-вакансий в сфере Вашей деятельности и выбрать для изучения то, что будет востребовано. Это может быть Angular, Backbone, Sprute.js, Bootstrap и так далее. Без основ никуда.

Comments

[Сергей Vortoms]

В принципе согласен.
Но вот досконально изучать HTML, CSS - не советовал бы.
Достаточно изучить основы,недели хватит с лихвой. А дальше практика, практика и еще раз практика.
Пока делаете - все запомнится, что-то новое легко гуглится или спрашивается, смотрится в книгах.

[Олег Савчук]

Сергей Vortoms: Не совсем согласен. Успехом разработки любого приложения, будь то прикладное ПО, либо web - является знание основ того языка, на котором происходит реализация. Понятно, что html/css не база, ведь есть много других инструментов разметки, но эти являются базовыми, и я рекомендовал бы их знать досконально (я о теории). Потом, когда у него уже будет достаточно опыта, сам поймет, что стоит запоминать, а что нет. Например, у меня была ситуация один раз, пришел я как-то устраиваться в одну фирму на должность junior python, а рядом со мной было 2-3 человека на должность junior front-end dev., так вот, вопрос был сразу в лоб: какими способами браузеры парсят html страницу. Один не ответил, второй выпалил как будто в голове ДЦ Яндекса у него, я этого тоже не знал. Видимо, парень тот знал о существовании Хабра (я потом нашел ту статью и перечитал её, как браузеры обрабатывают web-страницы). Вот так. Основы важны.

Но опять же, это лишь моё мнение и оно может не совпадать с Вашим, прошу это учесть.

[Сергей Vortoms]

Олег Савчук: Основы - подчеркну! С этим согласен полностью - основы нужны. Но вот зубрить все теги HTML и свойства CSS - по мне не продуктивно (мое ИМХО). Нужно всеми попользоваться, понять как работают и знать где искать если забыл, или где спросить. Главное нужно понимать основы самой веб-структуры и ее тонкости. Опыт и знания придут во время работы, а так потратишь кучу время на теорию. Которая частично забудется через короткое время, без практики.
10% запоминается когда читаем, 40% - когда смотрим, 90% - когда делаем. =)

Как говорил Эйнштейн: -"Зачем мне что-то запоминать, когда я могу легко посмотреть это в книге".

На 100% уверен, что даже опытные разработчики fron-end не помнят некоторые свойства CSS (которыми вообще не пользуются).
А собеседование не показатель. Там и Pro можно завалить каким-нибудь вполне не сложным вопросом =)

[Олег Савчук]

Сергей Vortoms: возможно, Вы правы. Возможно, это лишь мой такой подход, ибо я не могу что-то делать не зная как это работает в идеале.

Answer 3

[Eugene Burmakin]

Легко и непринужденно делегировать фронтендеру :)

Answer 4

[AleksDesker]

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

Comments

[Klein Maximus]

Замучаетесь современное SPA на jQuery писать.

Answer 5

[khipster]

Скоро Angular 2.0 выйдет, вот его и бери.

Comments

[Eugene 222]

что-то мне подсказывает(мониторинг зарубужных ресурсов), что пациент скорее мертв чем жив

[CAMOKPYT]

Жирный плюс за ангуляр2, это другой, гораздо более удобный фреймворк на TS, он даже в бетке намного более крутой чем первый и все остальные фреймворки. Берешь ангуляр2 и пишешь проект, не надо тратить огромные суммы на людей которые смогут соединить реакт и еще тысячи либ в один недофреймворк. Особенно плюс для бекендщика. Выучил один раз нормальный целостный фреймворк и можешь решить все задачи.

[khipster]

CAMOKPYT: ну не все ;)

[Алексей]

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

[CAMOKPYT]

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

[Алексей]

CAMOKPYT: Вы что думаете порог входа в один большой Angular/Ember/etc. меньше чем в пару небольших либ? Вот как раз наоборот - либы вы добавляете по мере необходимости и достаточно быстро можете получить готовый продукт. А вот если вы новичок в большом фреймворке - до релиза долго идти. Если одна из маленьких либ устареет так что её нельзя использовать - она меняется на другую. Тот же React никак не привязан ни к Flux, ни к Redux - в самом крайнем случае можно свой велик для части системы запилить. А что будет если перестанут поддерживать большой фреймворк? Придётся перепиливать весь проект с нуля. Или вот у Angular 1 были большие проблемы с производительностью - aviasales ручками там внутри правили под свои нужды - это проще чем править / заменить маленькую либу? Или тупо не будут успевать фичи за вашими хотелками добавлять? Это повсеместно.

[Дмитрий Морозов]

CAMOKPYT: я правильно понимаю что бекэнд пишут на старом добром PHP, а к нему фронтэнд на ReactJS, Angular и прочем?

Answer 6

[Web Developer Blog]

React, имхо

Comments

[copal]

Плюсую, в react есть только то, что поддается повседневной логике. А вот с angular придется подстраиваться под квартиру с метровыми потолками и при этом говорить что согнувшись в три погибели на самом деле даже удобно, ведь это же гугл.

[Сергей Vortoms]

React + Redus

[Max Kamashev]

Сергей Vortoms: redux?

[Zhandos M]

по мне минус React, кажется то, что он завязан на архитектуре node

[xtalen]

Zhandos M: любой frontend завязан на node, как иначе сборку делать?
Проблема в том, что большое приложении на среднем компе может собираться очень долго))

[Zhandos M]

Игорь Андреевич: я про его крутую фичу рендеринга js из бэка. Ради этого плотно юзать js в бэке нет особого желания

[xtalen]

Zhandos M: ну это уже для "любителей"

[Zhandos M]

Игорь Андреевич: мне кажется, без этого, React неполноценен

[xtalen]

Zhandos M: полноценен, это одна из особенностей. Вообще, любой js проект можно рендерить на сервере, есть проекты для Angular, например. В этом нет ничего особенного.

[Сергей Vortoms]

Max Kamashev: ага. Промахнулся ^^

Answer 7

[Zhandos M]

Мне кажется, легко и непринужденно писать фронтенд невозможно

Answer 8

[Eugene 222]

Языки:
ClojureScript. Быстро просто и удобно.
TypeScript. Если нужны типы и вы привязаны к семантике JS(В команде много JS разработчиков не готовых учить нормальные языки).
------
Ractive.JS если вам нужна типичная(живая) страничка с большим количеством зависимостей от состояния.
Плохая композабельность, однако прекрасно работает в модели серверного рендеринга(вам не придется учить новые концепты). Т.е. У вас есть шаблон(mustache). К нему применяется состояние, рендерится вьюшка.
Плохая композабельность потому-что mustache в mustache вы не вложите так-же красиво как компоненты в реакте.
-------
React. Сильно продвигаемый и довольно удобный. Если используете React, то смотрите сюда https://react.parts/web
очень много готовых компонентов
-------
Скажем так
SPA: ClojureScript/React/TypeScript
Оживленная страничка: es6/Ractive

Answer 9

[PQR]

Лёгкий, непринуждённый и, главное, надёжный Frontend - это Elm!
https://youtu.be/ZD0GcCAopc4
elm-lang.org

Answer 10

[dbelka]

Зависит от задачи.
Если вам нужно просто добавить динамику на страницу, то однозначно jQuery.

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

Лично я пишу клиент на ангуляре легко и непринужденно :)

Answer 11

[Димон Дурак]

Polymer

Answer 12

[Shane Matte]

писал пока что на angular, удобная штука. Но думаю перейти на реакт.

Comments

[lagaca]

Чем мотивирован переход?

[Shane Matte]

lagaca: быстрей

[Klein Maximus]

Shane Matte: А почему не Angular2?

Answer 13

[Klein Maximus]

А что скажете про Backbone.Marionette?

Comments

[Дмитрий]

писать на Backbone можно, но уже не модно.
сейчас в тренде ангуляр/реакт.

[Klein Maximus]

dimasmagadan: А чем ангуляр/реакт лучше? Только тем, что они моднее?

[Anton Filippov]

2 old

[Klein Maximus]

Anton Filippov: В смысле? У Marionette выходит версия 3.0

[PQR]

Klein Maximus: я слышал у Delphi тоже выходят новые версии каждый год и вроде как раньше на нём можно было писать для десктопа легко и непринуждённо... вот такая аналогия у меня родилась с Backbone/Marionette

[voidMan]

Если человек не слышал ничего про фронтенд, то это не тот выбор, много ручной работы

[Alex Grey]

PQR: какая-то странная аналогия. Delphi и сейчас в первой тройке по популярности среди IDE для создания windows приложений.

[nirvimel]

Alex Grey: Среди преподавателей деревенского ПТУ Delphi вообще на первом (и единственном) месте по популярности для создания Windows (разве бывают какие-то еще?) приложений при помощи перетаскивания кнопок на формы. А когда у таких "программистов" ломаются клавиатуры, они спокойно продолжают "программировать" без них.

[Alex Grey]

nirvimel: "разве бывают какие-то еще?" - ну, вообще-то, ещё бывают Linux, OSX, Android, web приложения. Если судить с колокольни выпускника деревенского ПТУ, то наверно, можно считать Delphi устаревшим. Утверждать не буду, сам-то я институт в столице оканчивал. Но если смотреть на рейтинг популярности, то аналогия получается странная.

[nirvimel]

Alex Grey: "разве бывают какие-то еще?" - об этом не упоминают на уроках информатики. Слово Windows вспоминают, только во время проверки из ОБЭП, Windows для них - это что-то типа аптечки для ГИБДД, то есть какая-то ерунда, за отсутствие которой можно всех нагибать.
По аналогии, Delphi - это такая программа, в которой рисуют другие программы, этот процесс называется программированием, и этим занимаются особо крутые "программисты" (простые "программисты" занимаются тем, что переустанавливают Windows и заправляют принтеры).

Так все и происходит на просторах (не только) России. В этом и кроется причина массовой распространенности Delphi и высоких позиций в рейтингах "языков, которыми владеют".

[Alex Grey]

nirvimel: pilot.jpg

[alxalx]

Все нормально с ними, да, не так модно, как ангуляр, но какое это имеет значение? У них свой подход к связыванию js-кода с html, заключающийся в отсутствии засорения html всякой невалидной хренью, чем грешат большинство других фреймворков.

Answer 14

[Дмитрий Николаев]

Попробуйте Sprute.js. Это изоморфный JavaScript фреймворк - позволяет писать привычный бэкенд код, который будет работать и на бэкенде и на фронтенде.

Comments

[Klein Maximus]

Catberry.org тоже изоморфный. И бандл подключается очень небольшой.