Всем привет! Подскажите, как наиболее грамотно реализовать элемент <picture> с srcSet

в React, при подгрузке данных в компонент (карточка каталога) из json файла, интересует именно строка в srcSet. Мне необходимо конкатенировать строку в React компоненте на фронтенде или я так полагаю строка будет конкатенироваться на бэкенде при загрузке фотографии на сервер (кроп под определенные величины итд). Т.е. исходя из этого я спокойно создаю в json файле строку вида "srcSet": "img/content/services-item__img_portrait_640.webp 640w, img/content/services-item__img_portrait_1280.webp 1280w, img/content/services-item__img_portrait_1920.webp 1920w" ?

Причем тут Node.js?

Если бэкенд будет на node.js

У тебя ни слова про бекенд

Аргументируй или перечитай сообщение

>Всем привет! Подскажите, как наиболее грамотно реализовать элемент <picture> с srcSet в React, ... > Перестаю читать сообщение

"я так полагаю строка будет конкатенироваться на бэкенде при загрузке фотографии на сервер (кроп под определенные величины итд)"

Да

Подскажи, какой бензин заливать в Тойоту короллу? Я иногда из нее на ноде пишу

Т.е. я спокойно могу передавать бэкендеру фронтенд, где в json файле уже полностью сконкатенирована строка для srcSet со всеми дескрипторами ? И это будет правильно с точки зрения всех best practice итд ?

Моя специализация фронтенд, я имею очень слабое представление о бэкенде. Предполагается, что бэкенд для проекта будет на node.js, поэтому я и интересуюсь в этом чате, разве это не логично ? Подскажите, что некорректного в вопросе ?

То что реакту без разницы на каком языке бекенд

Да я это понимаю, бэкенд планируется на NodeJS, вы можете сказать, в каком виде бэкенд на NodeJS будет мне передавать строку с информацией о пути srcSet для <picture> в json, чтобы я уже передавал эти данные в React и соответственно выводил их на клиенте ?

Должен быть контакт API. А что там на беке, nodejs или ponylang это уже дело десятое. Пройдите в чат react, вам там объяснят как работать с api

Вы шутите ? ) Я понимаю как настроить контакт с API, с помощью fetch, xmr, jsonp итд итп, вопрос в другом ) Меня интересует вопрос, в каком виде бэкенд будет мне отдавать информацию об изображениях карточек каталога, в виде нескольких строк, т.е. путь к каждому из изображений отдельно или уже сконкатенированный путь с дескрипторами вида: "img/content/services-item__img_portrait_640.webp 640w, img/content/services-item__img_portrait_1280.webp 1280w, img/content/services-item__img_portrait_1920.webp 1920w" ? Или вообще только название изображения "services-item__img_portrait_", а уже модификаторы размеров изображений я буду сам дописывать и конкатенировать на фронтенде ?

Бекенд может отдавать в любом формате, хоть по вебсокету по одному сообщению

Ну а с точки зрения лучшей практики, посоветуйте, как мне изначально планировать фронтенд, указывать в тестовом json файле строку с полным srcSet, с расчетом, что эта строка будет формироваться на бэкенде или как ?

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

Ок, спасибо большое за развернутый ответ! Видимо у меня не достаточно знаний в области fullstack, думал с моей стороны будет достаточно связки react/redux + передачи проекта бэкендеру, предполагал, что реализация серверной части будет за ним, видимо все немного усложняется )

Серверную часть и правда должен реализовывать бекендер, но чтобы вы говорили на одном языке, нужно разработать апи, на листочке, в вордовском документе, в формате OpenAPI/Swagger, еще в каком-то формате - не важно, главное что вот эта вот связка фронта и бека должна быть где-то и как-то описана, или вами лично, или бекендером лично, или совместными усилиями, или на основании выданного тз, или отдельный человек эту апи опишет...)) А так представте, для вашего бекендера поидее чисто фронт будет выглядеть точно так же, как для вас чисто бек)) и вряд ли он сможет догадаться как у вас все работает без какого-то описания)))

Буду изучать вопрос, видимо у меня есть приличные пробелы в знаниях ) Вообще я предполагал со стороны бэкенда исключительно передачу данных о товарах (предполагался интернет-магазин), корзину итд я предполагал реализовывать на фронтенде, то есть какой-то сложной логики на бэкенде не предполагалось, исключительно хранение данных о товарах и добавление их через админку. По сути мне необходим только один json файл при изначальной загрузке сайта, возможно я представляю все немного легче, чем на самом деле )

🤣 если у вас интернет магазин на 5-10 товаров, то вам действительно с бекенда нужен только один json файл, в любом другом случае у вас будет очень много чего связанного с беком: авторизация, аутентификация (например типа двойной аутентификации по паролю и смс), оплата товара, валидация данных о доставке, создание аккаунта и его редактирование, фильтрация и выборка товаров (она делается на бекенде, а не на фронтенде, потому что если товаров будет около 1000, фронт задолбется ждать json с таким колличеством товаров) и т.д. и т.п. ...

если вернуться к изначальному вопросу, то проще всего переложить ресайз/thumbs изображений на nginx

Ваще не факт что nginx это должен делать)) может в админке фронт это делать будет при заливке или бек или nginx 😏

так или иначе кэширование потребуется настроить, а там рядышком можно еще и всяких фишек накрутить

Вообще магазин предполагался не особо крупный, по одежде, скорее всего один бренд, предполагал, что можно реализовать подобное на связке nodejs/react, фильтрацию думал сделать на фронте. Аутентификация итд и вправду наверное более энергозатратны, чем я изначально предположил. Обсуждал с бэкендером который разрабатывает на WordPress, сошлись во мнениях, что минимум выйдет около 300-400 К, решил попробовать набросать mvp на фронте, чтобы понять имеет ли смысл за такое браться с таким бюджетом, чтобы сделать что-либо более-менее достойное, но видимо совсем не вариант )

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

Да да, я вот и сам считаю, что WordPress это не бэкенд для магазина, поэтому и решил совсем по быстрому набросать совсем примитивный mvp на React'е, чтобы понять какие могут быть энергозатраты с моей стороны. Вообще думаю с таким бюджетом это вряд ли реализуемо на нормальном стеке. А на ваш взгляд, при наличии фронта react/redux - сколько приблизительно по стоимости в среднем может выйти бэкенд разработка нормального специалиста при усредненных требованиях к сайту, т.е. заказчику требуется исключительно редактировать товары на сайте из админки ?

Ох, я уже давно не фрилансер, так что уже давно не в курсе где, что и сколько стоит, но думаю кто-то вам может тут и подсказать))

Ну да, хотелось бы примерно понимать, примерный диапазон цен на бэкенд разработку на NodeJS для не сложных интернет магазинов, чтобы сразу озвучивать клиентам минимальный ценник, чтобы всем было комфортно ) Я знаю что со своей стороны я могу качественно реализовать дизайн/верстку/фронтенд, а вот бэкенд совсем не представляю что и как ) А клиентам как правило так не сказать, что я вам сделаю клиентскую часть, а серверную вы специалиста найдете и он вам сделает 🤣

Так не бывает потому что оч часто в ТЗ может быть оч много сложной логики, лучше отталкиваться всегда ТЗ

Да, понимаю конечно, но при первых переговорах с клиентами - как правило хотя бы какая-то конкретика желательна, иначе люди часто начинают думать что их пытаются развести итд, мол надо подумать, с кем-то обсудить... хотелось бы хотя бы примерный диапазон цен понимать. На WordPress я к примеру всегда озвучиваю сумму по формуле: оплата за мои дизайн/верстку (100 К к примеру) + бэкенд (от 30 до 100 за промо сайты и от 70 до 200-300 за интернет магазины к примеру). Хотелось бы иметь подобную формулу на NodeJS )

Я такой не знаю к сожалению 😁

Эх, я вот тоже ) Буду пока для себя mvp делать под интернет магазин, чтобы был шаблон что называется, потом уже по результату буду узнавать у NodeJS специалистов, сколько будет стоить реализация такого проекта на сервере, чтобы хотя бы примерно понимать от чего отталкиваться )

Могу сказать так что даже простой интернет магазин требует проработки архитектурных моментов таких как бд, бэкенд, эквайринг и пр. Вполне синьорская задача а значит можно умножить средную синьорскую ЗП на часы и получить ответ

Ну да, вполне логично, только по срокам реализации я не очень представляю, сколько это может занять у человека. Предполагаю, что у людей уже есть готовые решения, фрагменты кода итд итп, но это не суть, человек может и за один день сделать что-то, что оценивается в один месяц по часам теоретически, я как фрилансер это сам прекрасно понимаю ) Ну на мой взгляд для РФ - 200-250К в месяц это вполне нормальная ставка, вот и вопрос, реализует ли качественно специалист за 200-250К бэкенд за месяц или нет ) Т.к. мне так же какие-то договоренности по срокам необходимо соблюдать с клиентами. Как вы думаете ?

Оценка сроков оч простая задача В первой итерации ты декомпозируешь для себя прикидываешь насколько много в задаче букв и кейсов. Вторая итерация умножаешь полученный срок на два Третья итерация если полученная цифра тебя не устраивает умножаешь ее ещё раз Качество и время 😉 всегда можно договориться о еженедельных встречах и демонстрациях если закончишь раньше значит молодец 🙂

я боюсь и за 1кк в месяц могут реализовать не качественно 😏 Так сказать качество от денег не всегда на прямую зависит 😅

Да, согласен, сам уже давно убедился, что лучше сразу озвучивать и время и ценник с запасом ) + Самый оптимальный вариант выполнения / оплаты - разложить проект на этапы, так у всех будут какие-то гарантии и все будут спокойны )

Хаха даже если ты самый классный и качественный специалист написавший чистый код другой легко раскритикует твою работу просто потому что у него другое виденье 🤷🏻‍♂️

Да это конечно, я иногда ради интереса смотрю код некоторых явно дорогих проектов, удивляюсь сильно, т.к. там БЭМ не правильный, верстка не валидная, не семантичная итд, вообще развод полный видно сразу )

от 60€ в час фуллстэк

Зачем запоминать все эти суфиксы?

для graceful degradation следует добавить отдельно в json просто src

Прошу прощения, фуллстэк в смысле диз+фронт или фронт+бэк?) Оказалось фуллстэк по разному воспринимают))

фронт, бэк и по-мелочи

9.6-10k евро в месяц?) Жирненько однако)) И часто такие задачки появлялись за такие денежки?)) Ну мне просто интеерсно, на сколько постоянно такой доход был?)

если фрилансить, то это ноулайф, я так уже второй год не делаю, тк на здоровье аукается да и свои проекты есть. один-два норм клиента и можно вполне норм жить не тужить. а если не фриланс, то в эстонии можно и за 5-6к сидеть, а если хочется остренького, то multiple remote jobs))

Такой рейт только в долине встречал, но платят они только местным, на удаленке ценник сразу ниже, и такое практикуют почти все компании

на гос.предприятиях вполне норм рейт. там еще целая цепочка откатов впридачу

Смотря в какой стране, в Европе у госов ценник ниже рынка за счёт приятных социальных бонусов

ну у нас тут в эстонии похоже своя атмосфера... порядка 20млн вкинули в систему электронного здравоохранения, которую пилить две недели, так в итоге даже ничего не получилось 💁🏻‍♂️

Ага, спасибо за совет, так и планировал сделать для поддержки старых браузеров, получается у меня будет 3 полных, полностью сформированных с дескрипторами пути в json файле для каждого изображения в карточке товара и это вполне грамотное решение, т.е. srcSet для wepb изображений, для jpeg и отдельно src для совсем старых браузеров ?

А как будет сделать более грамотно ? Их либо хранить в json в уже полностью сформированной строке, либо конкатенировать строку на фронте

Интересует не фуллстэк, а именно бэкенд на nodejs. Если есть дизайн, верстка, фронт на react/redux - сколько примерно может быть усредненная комфортная для разработчика цена на разработку бэкенда для интернет магазина на nodejs ? Хотя бы примерно сколько закладывать на бэкенд времени и финансов при переговорах с клиентами ?

заходите на upwork и чекаете hourly rate

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

именно так, от тз

Вы не у тех спрашиваете 😂 Найдите сначало коллегу, а потом у него будете спрашивать 😅

Да хотелось бы перед поиском коллег немного подготовить почву ) Чтобы тоже примерно понимать, какой ценник комфортный, но в тоже время адекватный )

ну тогда могу посоветовать только списки зарплат в зависимости от языка и ранга (ждун, мидл, синьйор)

Ну да, я примерно от этого и думаю отталкиваться, если бэкенд к примеру требует месяц реализации - 200/250 К вполне нормальный бюджет для РФ думаю