Web-мастера


Ответить в тред Ответить в тред

Check this out!
<<
Назад | Вниз | Каталог | Обновить тред | Автообновление
29 1 19

Что использовать для ЙОБА фронтэнда в 2018? Аноним 01/01/18 Пнд 17:24:23 1090441
123qwe.jpg (42Кб, 491x540)
491x540
Я к вам из 2012 телепортировался, скажите насколько зашкварно в 2018, делать новый йоба фронтэнд проджект на jquery+bootstrap?
Или не зашкварно? Если зашварно то в какую сторону смотреть?
Что вы используете сами? Ангуляры и прочие реакты мимо меня прошли, стоит в них вкатыватся или эта мода уже прошла как и на прочие рельсы? Стоит ли вместо jquery смотреть на ВУЕ, или это тоже очередная мода?
Аноним 01/01/18 Пнд 22:23:53 1090482
React / vue, webpack, jquery не нужен, 4 бутстрап имеет поддержку флексов, поэтому норм
Аноним 18/01/18 Чтв 17:47:13 1093303
>>109044 (OP)
>мода уже прошла как и на прочие рельсы
рельсы популярны как никогда
Аноним 20/01/18 Суб 01:49:49 1093564
>>109044 (OP)
всё популярно. Читай официальные доки по react, потом по redux и вкатывайся
Аноним 25/01/18 Чтв 19:45:00 1094425
>>109330
>рельсы популярны как никогда
Двачую, просто прошел изначальный хайп и они стали более зрелым фреймворком.

Вообще сейчас советуют учить Angular, еще надо знать Bootstrap.

Вот здесь расписывали по этому поводу:
http://blog.topolyan.com/почему-angularjs/
http://blog.topolyan.com/введение-в-twitter-bootstrap/

Еще сейчас популярен React. Можешь еще посмотреть jQuery.
Аноним 25/01/18 Чтв 20:05:37 1094446
>>109442
А jQuery еще юзается когда есть всякие реакты?
Аноним 25/01/18 Чтв 22:36:57 1094457
>>109444
Да, пока еще юзается. Реакты и ангуляры обычно для более сложных интерфейсов и SPA используют.
Никитка 03/02/18 Суб 22:57:26 1096428
Я такой пришёл расставить по полочкам где jQuery и где React, зачем и почему.
На самом деле все путают мягкое с горячим. Туда же gulp vs webpack.
jQuery - библиотека для упрощения манипуляций в DOM. Помогает быстро описать логику работы компонента. Любые кастомные плюшки, jQuery уже никогда не исчезнет и останется навсегда как минимум в моём сердце, потому что либа показала разработчикам браузерных интерпритаторов как должен выглядеть JavaScript.

Теперь о Front-end, к которому jQuery никак не относится.
Если ты не вчера познакомился с клиентским js, то уже навреняка прохавал - если удалить из дома сайта какой-то узел и поставить на его место новый узел, даже с такой же разметкой, но другими данными, то логика узла пропадёт. Сюда как правило относится ajax -> success -> remove(old) -> append(new) Именно на этом принципе основывается Single Page, и это для любого проекта заебок - если новые данные тянутся по ajax мы получаем 1 - асинхронность 2 - скорость - не приходится ребутать страницу полностью, как на двачике =)
Что делает react / vue / angular итд - эти либы отслеживают состояние компонента - дают ему своеобразный жизненный цикл и колбэки на каждый элемент цикла, рендерят разметку динамически при этом сохраняя их состояния, тем самым мы можем создавать на странице новые элементы, обновлять существующие итп. Без потери логики работы компонента.

Как было до front-end плюшек при необходимости single page но имея (нет, имеет тебя он kek) только jQuery :
1) если проще
О фак, этот компонент обновляемый. Ок, я буду ремувить старую разметку и подтягивать новую с сервера, логику компонента я положу в отдельную задекларированную функцию и буду вызывать её при init страницы и по ajax success.

2) Если нужно минимум напрягать сервер.
О фак, этот компонент обновляемый и новая разметка много весит. Надо загрузать в json. Окай, тусуем также логику компонента в задекларированную функцию, в ajax success я вызываю функцию, в аргумент скидываю нужный json, прохожусь по нему циклом, очищаю старую разметку и создаю для каждой ячейки свой шаблон, конкатенируя его с данными и append в родителя.


А теперь немного имхо.
Сводим к тому, что же юзать. angular, react или vue - троица конкурентов.
-----------------------------------------------------------------
Я начал изучение со знаменитого всем реакта (fb ui я не перевариваю и отнёсся изначально к реакту предвзято). Открыл доки, увидел строчки в тутсе туду листа:
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
Перекрестился, наебнул водки - я думал мне померещилось. Биндинг хэндлеров к самому себе... Закрыл тутсы и никогда больше не открывал.
----------------------------------------------------------------
Открыл angular 2 - всё на typescript, вспомнил что я хипстер и хочу возрождения coffeescript. К жёсткой типизации я пока не готов, хотя либа понравилась, основы впряг.
----------------------------------------------------------------
Vue - название пидорское если чесн, но глупо до такой мелочи докапываться, а выбора всё меньше. На Vue я и остановился. До meteor, ember и прочих так пока и не дошло.

Почему я понял что это любовь?
1) Поддержка browserify + vueify - весь код компонента в одном файле - сок.
2) Ловко встал на мой gulp конфиг, с которым я работаю из проекта в проект - получил обратную совместимость при необходимости рефакторинга, если вдруг какому-нибудь заказчику захочется Single Page.
3) На изи пошла вся теория. Код реакта я просто не понимаю, он запутан и порой просто извращён. Код на Vue декларативен, как будто ты просто поставил плагин слайдера и зарядил параметрами - vue-код прочитает любой, кто умеет читать css.

Срач не начинайте, плес. Прошу заметить, я не хотел обосрать реакт или ангуляр - кто как хочет так и дрочит, но это лично моя позиция и опыт того, как я стал джуном фронта
Аноним 06/02/18 Втр 21:17:54 1096989
>>109642
Во, подскажи че в каком порядке учить чтоб устроится front джуном? Довольно неплохо знаю html5, css3, понимаю как работает стек tcp/ip, могу немного в python/django, php х/з зачем я это написал, но кароч не прям с нуля, некий базис кодинге есть.
Аноним 07/02/18 Срд 21:08:21 10972010
>>109698
Ну я начал учить js с jQuery. Обычно у всех принято сначала учить язык, а потом уже либы, но как по мне jQuery отдельный случай - он был создан чтобы всё упростить.
Естественно наряду с jQuery нужно вкурить основы js. В этом плане нет ничего лучше обучалок от Sorax "javascript-джедай", в сравнении с его плейлистом всё остальное мутная неперевариваемая хуйня.
Апнул пару обучающих макетов с интерактивом на js - значит пора готовится к бою с реальными проектами. В этом тебе помогут гугления основ nodejs. С 10го года экосистема языка сильно изменилась, когда google выпустил на рынок акулу-монстра-наногибрида - серверную платформу nodejs, которая с релизом моментально начала наматывать на хуец всех phpшников. Первоначально его задумывали для разработки сервера, умеющего работать многопоточно (обрабатывать сразу несколько запросов одновременно - apache+php так не умеет). Сейчас из-за низкоуровневости nodejs в качестве сервера её используют довольно редко и только по необходимости, сейчас она необходима всем фронтёрам в качестве клиентского рантайма, умеющего:
1) Компилировать код шаблонизаторов: от pug до smarty
2) Компилировать код пре/постпроцессоров: от stylus до postcss
3) Собирать все клиентские скрипты (jquery, плагины, фреймворки) в один большой main.js из купи маленьких component.js, разбитых по файлам. (думаю плюсы такого подхода можно не перечислять)
4) Разбивать вышеперечисленное на отдельные процессы - любые процессы (от запуска локалки на любом совбодном порту, до конвертации файлов через серверные js-плагины) запускаемые через командную строку - это к слову о gulp
5) Контролировать все зависимости приложения в одном файле манифесте packege.json

PHP чмо. Выкинь этот мусор из головы. Конечно, из-за его древнего происхождения в вебе множество руинного говнокода на php, куча CMSок, которые юзаются до сих пор потому что изи, хоть и не гибко. PHP для чайников, на нём легко писать, он распространён, но работает медленнее многих альтернатив, включая ноду и дебаг на php ёбаный пиздец, лучше вышибить себе мозги на стену, чем распутывать php-спагетти. Django збс - в его сторону стоит смотреть, кастомен, асинхронен. Но для Django нужен хороший python в голове.
Кайфные плейлисты про ноду есть тута:
https://www.youtube.com/channel/UCSsg9NLCse2XQCIRgfmJu3Q
js front-end и js back-end - оба полезны.
Про ноду можно ещё долго рассказывать, но я завершу тем, что благодаря ноде на js можно писать в прямом смысле всё. кроссплатформ десктоп: electron, мобилки: ionic framework, сервера: express ну итд. и эра js только началась
Аноним 22/02/18 Чтв 11:13:38 10987811
>>109720
Ты забыл коллбек в конце своей куллстори хуйнуть, js-макака

---

А впрочем рынок Ноде-ЖС пограммистов пусть он и уебищен для всего кроме чатиков и геймблинга довольно пуст (если сравнивать с рынком ПХП), так что можно ухватить нормальную зп даже джуном. А к такой зп на ПХП ты будешь топить полтора года
Аноним 23/02/18 Птн 09:03:58 10988912
А может кто-нибудь популярно и на примере объяснить зачем вообще существуют фреймворки, какие задачи выполняют?
Я как-то просидел без проблем и тревог в своём мирке, а тут бац - и всё в каких-то непонятных фреймворках.
Сколько ни силился понять через гугл что с ними делать, так и остался аутсайдером.
Аноним 23/02/18 Птн 15:22:19 10989413
>>109889
Вот тут анончик все популярно объяснил >>109642
Аноним 23/02/18 Птн 18:30:56 10989614
>>109894
Не, всёравно до меня не доходит. Возможно это из за того, что я не пользуюсь веб компонентами? Фреймворки - это исключительно штуки для манипуляции с компонентами? Нужность фреймворков будет для меня определяться только нужностью веб компонентов в моём проекте?
Если так, то мне совсем не кажется, что это мастхэв для СПА, скорее как стиль организации данных для тех, кто любит обвешиваться и зарываться в куче крошечных файликов вместо цельной логики. Или я не правильно рассуждаю?
Аноним 24/02/18 Суб 13:00:41 10991115
>>109896
Чуви, окей, я шарю как ты думаешь если умеешь в jQuery. Вот у тебя есть разметка, ты меняешь её классы и вот тебе интерактив. Слайдеры, табы, селекты, прочая хуйня - это изменения в классах, атрибутах, парамтетрах узла. Они меняются меняется их представление на страние. То есть основа всего - узел.
Теперь представь что у тебя нет узлов и разметки. У теба просто есть массив данных в JSON. Ты читаешь данные и привязываешь их к разметке (в любом фреймворке на то есть директивы - ng-repeat, v-bind итп). Разметка не выводится на страницу как ты её раписал - она прожёвывается фреймворком и рендерится в зависимости от данных в json.
Сложно слышится - включи воображение:
1) У тебя есть массив. Представь обычный объект с массивом: {array:['аноны', 'в треде', 'несут', 'хуйню']}.
2) тебе нужно вывести его в маркированный список:
<ul v-for='item in object.array'>
<li>{{item}}</li>
</ul>
3) Теперь, что такое реактивность - чтобы убрать последний элемент списка, тебе не нужно прибегать к манипуляциям в DOM как на jQuery - li:last-of-type remove(), тебе достаточно убрать нужный элемент из массива - DOM перересуется сам собой. Ты управляешь интерфейсом через данные, получаемые в json, через жизненный цикл компонента и его состояния (для этого у фреймворков отдельная либа, более изместная как flux-библиотека) - которые тоже содержат данные в json и опираются на них. Всё в json, всё через ajax, никакой беготни по дому, вместо этого беготня по данным. jq тут просто не нужен. Это сбивает с толку на первое время. После 1го проекта привыкаешь - мышление перестраивается.
Вообще привязка представления к данным как таковая охуенно удобная идея - она разруливает проблему с событиями. Когда твоя логика опирается на базовые event listeners в сложном интерфейсе наступает момент, когда коллбэки триггерят друг друга и плодят. Дата-биндинг (да, привязка представления к данным так называется) как раз призван разрулить эту хуйню.
Вот эту статейку обязательно к прочтению: https://habrahabr.ru/post/225065/
Есть 2 способа биндить данные к дому - object.observe - первый и самый простой. Все фреймворки в зародыше использовали этот способ, но к сожалению во многих архитектурах (1я ангулярка говно из-за Object.observe) этот подход подвёл, хотя он удобнее 2го. пост про 1й ангуляр и его грехи: https://habrahabr.ru/post/246905/
2й способ сейчас является нормой, более контрольным но менее удобным - это по сути не отслеживание объекта как в первом случае, а просто пара getter - setter. Подробнее тута: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Неудобство proxy в том, что первоначально у тебя на странице нет данных - ты запрашиваешь их через ajax после создания корневого экземпляра фреймворка - чтобы set сработал и данные были реактивны нужно задавать в data экземпляра начальное состояние данных с нулями, пустыми строками - просто повторяя будущую структуру запрашиваемых данных.
заебался вам это разжёвывать, как дети ебана
Аноним 24/02/18 Суб 13:08:21 10991216
>>109878
О да, ебать, я знал что прибежит на своих кривожопых лапках php-программистмакака и начнёт на nodejs выёбываться. Ты падажжи, ещё лет 5 и пыхе твоей придёт пиздец - вся серверная логика будет в рантайме прямо на клиенте в ноде - встроят её в браузер и от удалённых серверов останутся только базы данных. Посмотрим как ты запоёшь , макака серверная
Аноним 24/02/18 Суб 13:20:43 10991317
>>109878
Да, кстати, я забыл коллбэк хуйнуть.
phpProger.on('bugurt', function(yourMom){
return yourMom.cry('потому что сын её подруги пишет на js')
})
Аноним 24/02/18 Суб 23:41:11 10992318
>>109911
Тааак, кажись я начал понимать. Фреймворки типа предоставляют синтаксис как в стилусе и прогоняют его заново при каждом изменении ядра компонента ввиде объекта с данными. При этом программируем мы в классах элементов.

Однако мне сложно понять какова альтернатива манипуляции с ДОМом.
Вот например мне нужно, чтобы по нажатию на кнопку все элементы вокруг неё перекрасились в красный. Элементарная задача в одну коротенькую строчку для jq.
А как быть с фреймворком? Мне нужно в структуре компонента заранее прописать логику этого возможного события при изменении какого-то флага в ядре-объекте? Или придётся пересобрать объект с данными, добавляя к нему поле с цветом, а к элементам - команду к перекраске при изменении этого поля? А что если у меня таких мелких событий десятки? Да ещё и в одном и том же месте? А если мне нужно, скажем, выкинуть элементы с определённым классом из элементов вокруг кнопки, а остальные всё так же красить в красный? Мне придётся прямо внутри компонента, при создании этих самых элементов вокруг кнопки обвешивать их кучей условий на все возможные случаи жизни? Звучит как чертовски труднорасширяемая система.

Но энивей пасибо, анончик, это всё действительно дало мне какое-то представление о смысле фреймворков.
Аноним 26/02/18 Пнд 17:32:05 11011419
>>109912
Вам конечно с вашей ноджс колокольни охуенно видно что там в тренде, да обизян?
Курите ReactPHP и как он дрючит ваш невъебацца ноджс по скорости парсинга страниц: https://philsturgeon.uk/php/2013/11/12/benchmarking-codswallop-nodejs-v-php/

Собсна с появлением асихронного Пэхапэ у Ноджс плюсов то и не осталось особо если вы не считаете колеченные одноногие классы и еблю с промисами/коллбэками плюсом

Кстати я могу и в ноджс и в пэхапэ. Но первый на хую я вертел ибо неудобно нихуя
Аноним 01/03/18 Чтв 00:54:14 11019720
>>110114
реакт SSR в php имплементировали. Сняли ягодку с олимпа и кинули в бомжей.
Просто вкури настройку кластеров на ноде и ручное управление garbage collectorом и твоя пыха с рендером статики соснёт хуец длиной секунды в полторы. А по неудобен ты вообще идёшь нахуй - все самые пиздатенькие топовейшие плюшки на JavaScript работают. Один язык на front-end и back-end и ты слонодрочер осмелился спиздануть про неудобство...
Действительно, нахуй промисы - давай дебажить через логи сервера - охуенное извращение дебаг пыхи - ебать вы все дрочилы вам терпения не занимать
Аноним 01/03/18 Чтв 01:06:35 11019821
>>109923
>Мне нужно в структуре компонента заранее прописать логику этого возможного события при изменении какого-то флага в ядре-объекте?
Именно. На изменение данных можно вешать колбэки - именно так и изменяется интерфейс. Как я писал выше для этого достаточно Object.observe и Object.proxy. Никаких объектов пересобирать не надо. По клику меняешь состояние какого-нибудь компонента, в этом компоненте колбэки на изменение состояния, которые красят хуясят и всё всё всё.
>Или придётся пересобрать объект с данными, добавляя к нему поле с цветом, а к элементам - команду к перекраске при изменении этого поля?
Ну это ты сложности какие-то надумал. Не надо ничего пересобирать
>А что если у меня таких мелких событий десятки?
Вот тогда с одним jQuery у тебя одни события плодят другие - как раз когда у тебя куча мелких событий чёта делают в дом. Просто чик нажали расплодили ещё несколько лишних колбэков. Дата-биндинг призван исправить эту проблему. Данные как таковые являются прослойкой между событием и действием.
Прочие а если мне нужно - заебал. Иди доки читай. Советую VueJS или React
Аноним 02/10/18 Втр 20:54:07 11696022
>>109044 (OP)
а что за третий логотип на картинге?
Аноним 03/05/19 Птн 20:01:27 12163223
А Jekyll сейчас актуален? Сайты уж больно крутые на нем.

https://jekyllrb.com/showcase

Еще посмотрел на код медиума . ком, загуглил и вроде он очень похож на Hugo https://gohugo.io/

Там еще ссылочка на CMS под него и vue.js , да и под много чего еще -- forestry.io. На первый взгляд привлекательно - не надо мудохаться с нодой. Но какие подводные камни? Какие мнения будут?
Аноним 09/05/19 Чтв 23:39:33 12176524
>>109444
JQUEY мертв, актуален только для вакансий где платят очень мало типа сайты визитки. на JQUERY как и на PHP пишут только самые слабые разработчики.

Аноним 09/05/19 Чтв 23:55:29 12176725
>>109912
Node и PHP для хуесосов, щас папки кодят на RUST
Аноним 12/05/19 Вск 20:36:31 12180326
>>121767
в чем преимущества?
Аноним 14/05/19 Втр 01:26:14 12184027
>>121767
и что за папки? тред вроде про фронт
Аноним 14/05/19 Втр 03:08:42 12184228
Бля, только сейчас увидел в названии темы 2018. Но похуй, все равно скажу - главное, на мой взгляд, смотреть кейсы. Сейчас у многих и на гитхабах и на своих сайтах только бла-бла-бла. красивая инфографика и обещания. Х
14/05/19 Втр 17:59:59 12185029
>>121840
Фронты щас умней беков
17/05/19 Птн 00:01:57 12188930
>>121850
Особенно если беки на пхп
Настройки X
Ответить в тред X
15000 [S]
Макс объем: 40Mб, макс кол-во файлов: 4
Кликни/брось файл/ctrl-v
Стикеры X
Избранное / Топ тредов