». За год с небольшим поднабрался теоретических знаний и кое-какого практического опыта по части фронтенда.
К примеру, за последние полторы недели по просьбе одного разработчика переделал веб-интерфейс клиентской части одной программы со связки JavaScript + jQuery + Bootstrap на Svelte + Bootstrap. Теперь исходники разбиты на небольшие модули Svelte (ES6+), из Bootstrap используется только CSS (bootstrap.min.css), а в конце для лучшей поддержки старых браузеров код транспилируется из ES6+ в ES5.
Не обошлось без мелких разочарований. Я сначала было прикрутил Sveltestrap (надстройка над Bootstrap, написанная на Svelte). Однако вскоре выяснилось, что верстка на выходе получается не совсем такой (а иногда совсем не такой), как при использовании оригинального Bootstrap. Кроме того, в некоторых случаях было затруднительно — если вообще возможно — прокинуть значения некоторых атрибутов. В общем, пришлось по большей части вернуть на место Bootstrap. А жаль, потому что HTML-разметка со Sveltestrap была лаконичной и выразительной (см. примеры под катом ниже).
<div>
<Button color="danger" on:click={toggle}>
Open Modal
</Button>
<Modal isOpen={open} {toggle}>
<ModalHeader {toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={toggle}>
Do Something
</Button>
<Button color="secondary" on:click={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
По ходу работы не раз и не два возникали проблемы как с логикой, так и с версткой. Я их по большей части решил либо обошел — привет StackOverflow, Mozilla Developers Network, Google Developers и иже с ними.
Переработанное приложение, как и оригинальное, работает и на десктопе, и на мобилах (пока только на Android; для поддержки iOS, возможно, еще придется повозиться, хотя в онлайн-эмуляторе уже малость потестировал).
Добавлю, что недавно еще попробовал поработать с Node.js. Оказалось, что на деле Node чуть ли не проще, чем Python, хотя, казалось бы. Кстати, Python я тоже вспомнил. Написал на нем простенький веб-парсер для своих нужд, а совсем недавно — небольшой текстовый парсер по просьбе одного опытного разработчика (больше для оценки моих способностей, поскольку он наверняка знает Python гораздо лучше меня).
В общем, если кому-нибудь вдруг понадобится сторонняя помощь в решении подобных задач, прошу иметь меня в виду. Конечно, я не великий специалист, но уже кое-чему научился.
Как и раньше, буду рад любым советам, даже злым и ехидным. Если достал, можно кидаться тапками.
P.S. Немного потестировал переработанную мною и оригинальную версии вышеупомянутого веб-приложения на мобильных версиях Safari и Chrome для iOS, воспользовавшись этими сайтами:
https://browserstack.com/ — навороченный платный сервис; на разовую пробу каждой виртуальной модели Apple дается ограниченное время.
http://www.responsinator.com/ — очень неплохой бесплатный сервис; при желании можно материально поддержать разработчиков («угостить пивом»); разработчики предупреждают, что у этого способа тестирования есть свои ограничения.
Обе версии приложения работают одинаково хорошо. К сожалению, у обеих версий не работает переход в полноэкранный режим (браузер в Browserstack выдает alert "not supported", а браузер в Responsinator молча игнорирует нажатие кнопки перехода в полноэкранный режим). Оказывается, это не баг, а фичанормальное поведение мобильных браузеров на iOS (речь идет как о Safari, так и о Chrome), а вот на Android всё работает как часы. В итоге пришлось сделать для iOS псевдополноэкранный режим, потому что других вариантов без отказа от единого UI так и не придумал.
Поправка: оказывается, тестировался только оригинальный код. Эх, поздно заглянул в Dev Tools...
P.P.S. У меня также есть небольшой опыт работы с фреймворком Vue.js, который в чем-то похож на Svelte по функционалу, синтаксису и структуре модулей.
Когда-то я думал, что Svelte — один из самых простых JavaScript-фреймворков с точки зрения фронтенд-разработчика (даже проще, чем Vue). Однако после использования Svelte в нескольких небольших проектах я переменил свое мнение.
Дело в том, что модули .vue используются в простейшем случае можно использовать как есть путем подключения библиотеки Vue.js (Development Version или Production Version), а модули .svelte обязательно компилируются и вдобавок иногда пропускаются через транспилятор вроде babel для обеспечения совместимости со старыми браузерами. Поэтому при использовании Svelte не обойтись без Node.js и бандлера вроде rollup или webpack, что несколько повышает порог входа по сравнению с Vue.
L>Дело в том, что модули .vue используются как есть путем подключения библиотеки Vue.js (Development Version или Production Version), а модули .svelte обязательно компилируются и вдобавок иногда пропускаются через транспилятор вроде babel для обеспечения совместимости со старыми браузерами. Поэтому при использовании Svelte не обойтись без Node.js и бандлера вроде rollup или webpack, что несколько повышает порог входа по сравнению с Vue.
Это как? вью точно так же пропускают через транспилер, кроме самых простейших случаев
Здравствуйте, Михaил, Вы писали:
М>Это как? вью точно так же пропускают через транспилер, кроме самых простейших случаев
Я так понимаю, любой ES6+ можно прогнать через транспилятор, однако в случае Svelte, помимо опциональной транспиляции, обязательно делается еще и компиляция (термин, наверное, условный). То есть в простейшем случае использовать Svelte, наверное, будет несколько сложнее Vue.
Спасибо за поправку. В том небольшом проекте на Vue, в котором я поучаствовал, транспилятор не использовался, поскольку предполагалось, что у пользователей будет свежая версия десктопного Chrome, и никак иначе.
Справедливости ради сообщаю, что мне так и не удалось добиться работы на iOS переделанной мною версии вышеупомянутого веб-приложения. За меня это сделал гораздо более опытный разработчик, о чем он рассказал здесь
, заодно высказав свое мнение о моих невеликих способностях. Не буду вдаваться в подробности, но отчасти я с ним согласен.
P.S. Если кому-то интересно, справедливости ради — куда уж без нее — могу рассказать, что и как я сделал в ходе работы над тем проектом. Ссылку на Github-репозиторий не приведу, поскольку он закрыт от посторонних глаз и там есть не только мой код, но могу показать фрагменты своего кода, написанного без посторонней помощи. К примеру, я добавил npm-библиотеку для конвертации мелких картинок в формат base64 со встраиванием их в HTML-код на этапе сборки проекта, чего не было в оригинальном коде.
Здравствуйте, The Minister, Вы писали:
TM>Смог же разобраться в JavaScript за несколько месяцев, сможешь программить и на Qt (или тому подобное) — ненамного сложнее.
Если я буду и дальше прыгать с одного ЯП на другой и с одной технологии на другую...
Освоил основы самого популярного JS-фреймворка React. Оказывается, он не так страшен, как малюют (по крайней мере, если не использовать библиотеки вроде Redux, в которые я пока не совался). Ах да, React не фреймворк, а библиотека.
Здравствуйте, Lazytech, Вы писали:
L>Освоил основы самого популярного JS-фреймворка React. Оказывается, он не так страшен, как малюют (по крайней мере, если не использовать библиотеки вроде Redux, в которые я пока не совался). Ах да, React не фреймворк, а библиотека.
Redux вообще простой. Понять за 5 минут можно. Вот только как в итоге это всё правильно использовать на практике — совсем другой вопрос. Там Redux и поверх него обычно ещё накручивают миллион библиотек, вот с ними голова кругом идёт порой.
Здравствуйте, vsb, Вы писали:
vsb>Redux вообще простой. Понять за 5 минут можно. Вот только как в итоге это всё правильно использовать на практике — совсем другой вопрос. Там Redux и поверх него обычно ещё накручивают миллион библиотек, вот с ними голова кругом идёт порой.
Вроде бы в простых случаях, начиная с React 16.8, можно не использовать Redux, а обойтись useReducer.
Здравствуйте, Lazytech, Вы писали:
vsb>>Redux вообще простой. Понять за 5 минут можно. Вот только как в итоге это всё правильно использовать на практике — совсем другой вопрос. Там Redux и поверх него обычно ещё накручивают миллион библиотек, вот с ними голова кругом идёт порой.
L>Вроде бы в простых случаях, начиная с React 16.8, можно не использовать Redux, а обойтись useReducer.
Да я бы вообще его не использовал, там же можно через state всё прокидывать. Видел, как так делали и нормально, работает. Писанины много, зато всё понятно, что куда. Но тут порой не ты же выбираешь, что использовать.
Хотя конечно у Redux есть свои уникальные фишки вроде hot reload, который прогоняет все действия, time travel. Может быть я и не прав.
Здравствуйте, vsb, Вы писали:
vsb>Да я бы вообще его не использовал, там же можно через state всё прокидывать. Видел, как так делали и нормально, работает. Писанины много, зато всё понятно, что куда. Но тут порой не ты же выбираешь, что использовать.
vsb>Хотя конечно у Redux есть свои уникальные фишки вроде hot reload, который прогоняет все действия, time travel. Может быть я и не прав.
Поначалу пытался прикрутить Material UI, но оказалось, что зачастую проще взять за основу образцы кода, найденные где-нибудь на просторах Интернета (например, на сайте w3schools.com), и допилить под свои нужды. Свое предварительное мнение о Material UI я высказал здесь
P.P.S. Если кто-то ранее не имел дела с великим и ужасным JavaScript, можете склонировать мой проект с гитхаба и установить у себя Node.js. Если после этого зайти в папку проекта и выполнить команду npm install, то будет создана папка node_modules, в которую будут установлены все необходимые библиотеки. Если заглянуть в папку node_modules, сразу станет понятно, почему в файле package-lock.json так много строк.
В итоге пришлось сделать для iOS псевдополноэкранный режим, потому что других вариантов без отказа от единого UI так и не придумал.
