В продолжение прошлогодней темы «
Кому-нибудь требуется начинающий питонист в подмастерья?Автор: Lazytech
Дата: 04.05.19
». За год с небольшим поднабрался теоретических знаний и кое-какого практического опыта по части фронтенда.
К примеру, за последние полторы недели по просьбе одного разработчика переделал веб-интерфейс клиентской части одной программы со связки JavaScript + jQuery + Bootstrap на Svelte + Bootstrap. Теперь исходники разбиты на небольшие модули Svelte (ES6+), из Bootstrap используется только CSS (bootstrap.min.css), а в конце для лучшей поддержки старых браузеров код транспилируется из ES6+ в ES5.
Не обошлось без мелких разочарований. Я сначала было прикрутил Sveltestrap (надстройка над Bootstrap, написанная на Svelte). Однако вскоре выяснилось, что верстка на выходе получается не совсем такой (а иногда совсем не такой), как при использовании оригинального Bootstrap. Кроме того, в некоторых случаях было затруднительно — если вообще возможно — прокинуть значения некоторых атрибутов. В общем, пришлось по большей части вернуть на место Bootstrap. А жаль, потому что HTML-разметка со Sveltestrap была лаконичной и выразительной (см. примеры под катом ниже).
| | Bootstrap vs Sveltestrap |
| | Сравните:
Modal · Bootstrap
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Components – Modals ⋅ Storybook
<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.
P.P.P.S. Дублирую ссылку на свой профиль на Codewars:
https://www.codewars.com/users/Lazyt3ch
По состоянию на 15 августа 2020 года Rank 3 kyu, Honor 1854.
Для достижения этого уровня мне понадобилось 25 дней.
