Javascript in big project

Engineering

evgeny-gusev
What`s wrong with Javascript Evgeny Gusev Date (03/02/2016) ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Проблемы JS освещались уже множество раз. Это и неявность this, и scope и прототипное наследование. Предлагаю рассмотреть проблемы с точки зрения большой команды + большой кодовой базы. Wrike - это 21 человек на фронте, и больше 2 миллионов строк кода. ‹#› JavaScript problems // data.js function getData(){ var dataFromServer = getServerData(); // some logging return dataFromServer; } // some other file var data = getData(); if (data.userIsAdmin) { // make some stuff } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Что плохого в этом коде? JavaScript problems // data.js function getData(){ var dataFromServer = getServerData(); // some logging return dataFromServer; } // some other file var data = getData(); if (?????) { // make some stuff } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Предположим, что я - новый сотрудник. Мне сказали, что нужно показать линку с кнопкой, но только для админов. Какое свойство тут юзать? Как итог: я иду и спрашиваю у коллеги, отнимаю его время. А если новых сотрудников десять? Это не скейлится. Есть выход - JDoc JsDoc = решение? /** * @typedef Data * @type Object * @property {userIsAdmin} user has admin rights */ /** * Used to collect data from different sources * * @public * @returns {Data} Function returns Data object */ function getData() ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Да, можно добавить доки. Но у них есть проблема. Их не обновляют, о них забывают. В любом случае - это человеческий фактор. Поэтому это не работает. Т.е. проблема номер 1 - JavaScript problems Знания размазаны по коду или сосредоточены в голове ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike JavaScript problems function getData() { var dataFromServer = getServerData(); if (dataFromServer.sessionExpired) { dataFromServer.status = 'expired'; } return dataFromServer; } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Проблема № 2: что плохого в этом коде? Нам вдруг понадобилось поменять логику работы, и мы решили добавить флаг в объект. Но мы не подумали и перетёрли статус. . Да, он нелегитимен, но я мог его сделать и мне никто не помешает. Вопрос, кто последний раз использовал freeze или seal. Как итог: минус номер два JavaScript problems Знания размазаны по коду или сосредоточены в голове Большое желание (и возможность) написать костыль ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Желание костылять возникает из-за того, что сложный легаси код на JS провоцирует это делать и, что самое главное - позволяет это делать. Ещё одна проблема - ООП. Да, он имеет свои недостатки и сейчас модным становится ФРП, но, по моему мнению - если команда большая и кода много - необходима максимальная строгость. Например как сделать интерфейс на JS. Реальный пример со stackoverflow JavaScript problems function PersonInterface(proto,fnName){ setTimeout(function(){ if(typeof proto.getSurName !== 'function'){ throw new Error(fnName + ' has to implement getSurName'); } },100); } function implements(fn, implements,fnName){ implements(fn.prototype,fnName); } function Employer(){}; implements(Employer, PersonInterface,'Employer'); Employer.prototype.getSurName=function(){}; ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Страшно выглядит? Реальный ответ со stackoverflow, как реализовать интерфейсы JavaScript problems Знания размазаны по коду или сосредоточены в голове Большое желание (и возможность) написать костыль Слабая поддержка ООП ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Далее идут проблемы изоляцией, это четвёртая проблема JavaScript problems Знания размазаны по коду или сосредоточены в голове Большое желание (и возможность) написать костыль Слабая поддержка ООП Проблема с изоляцией и модульностью ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Ещё одна проблема - это изоляция. Когда много людей работают над одним кодом необходимы какие-то механизмы, которые изолируют их друг от друга. Да, для этого есть много разных библиотек, порой даже слишком много. Но на стыке случаются проблемы: мало документации и возможность написать как попало. Итого вывод: Summary: JS is too weak ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike JS слишком слаб и мягок Solution: Dart ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Дарт Dart benefits: typing. Self-documented class Data{ bool userIsAdmin; // some other fields } Data getData(){ //... } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Дарт типизирован, что ведёт к тому, что он само-документирован. Можно кликнуть на любую структуру и узнать её свойства. Также это даёт автодополнение в IDE. Dart benefits: typing. Good analysis ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Также из плюсов - отличный, быстрый анализатор, который позволят карать Dart benefits: isolates library 'myAwesomeLibrary' import 'package:logging/logging.dart' show Logger, Level, LogRecord; import "package:test/test.dart" as test; export "package:utils/utils.dart"; class MyClass{ MyClass(){ test.Runner.begin(); } } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Изоляция кода в дарте позволяет организовывать библиотеки, нативно их экспортировать и импортировать. Также на это завязана приватность в классах. Есть zones Dart benefits: OOP abstract class Person { final _name; Person(this._name); String greet(who); } class Human { int getAge () => 14; } abstract class FruitLover { String getWhatILike () => 'Banana!'; } class Developer extends Human with FruitLover implements Person { final _name; Developer(this._name); @override int getAge () => 23; String greet(who) => 'Hi $who. I am $_name, ${getAge()} years old, i like ${getWhatILike()}'; } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike ООП в Дарт поддерживает всё что надо и даже больше, есть mixins! Dart benefits Богатая стандартная библиотека (пакетный менеджер, сборщик etc.) Скорость работы Не только JS разработчики могут писать код Выкидывает лишний код, а значит быстрее грузится ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Остальные плюсы Dart Dart vs TypeScript ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Почему не TS: язык ничто, окружение - всё! У дарта богаче стандартная библиотека. Он строже. TS позволяет писать на нём так же плохо, как и на JS. Ну и если Dart не взлетит - всё можно транслировать без проблем. Дарт проповедует парадигму Java - написано один раз, компилируется множество. Если выходит новый стандарт - мы просто перекомпилимся. Q&A ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Вопросы
Please download to view
19
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
Text
What`s wrong with Javascript Evgeny Gusev Date (03/02/2016) ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Проблемы JS освещались уже множество раз. Это и неявность this, и scope и прототипное наследование. Предлагаю рассмотреть проблемы с точки зрения большой команды + большой кодовой базы. Wrike - это 21 человек на фронте, и больше 2 миллионов строк кода. ‹#› JavaScript problems // data.js function getData(){ var dataFromServer = getServerData(); // some logging return dataFromServer; } // some other file var data = getData(); if (data.userIsAdmin) { // make some stuff } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Что плохого в этом коде? JavaScript problems // data.js function getData(){ var dataFromServer = getServerData(); // some logging return dataFromServer; } // some other file var data = getData(); if (?????) { // make some stuff } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Предположим, что я - новый сотрудник. Мне сказали, что нужно показать линку с кнопкой, но только для админов. Какое свойство тут юзать? Как итог: я иду и спрашиваю у коллеги, отнимаю его время. А если новых сотрудников десять? Это не скейлится. Есть выход - JDoc JsDoc = решение? /** * @typedef Data * @type Object * @property {userIsAdmin} user has admin rights */ /** * Used to collect data from different sources * * @public * @returns {Data} Function returns Data object */ function getData() ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Да, можно добавить доки. Но у них есть проблема. Их не обновляют, о них забывают. В любом случае - это человеческий фактор. Поэтому это не работает. Т.е. проблема номер 1 - JavaScript problems Знания размазаны по коду или сосредоточены в голове ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike JavaScript problems function getData() { var dataFromServer = getServerData(); if (dataFromServer.sessionExpired) { dataFromServer.status = 'expired'; } return dataFromServer; } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Проблема № 2: что плохого в этом коде? Нам вдруг понадобилось поменять логику работы, и мы решили добавить флаг в объект. Но мы не подумали и перетёрли статус. . Да, он нелегитимен, но я мог его сделать и мне никто не помешает. Вопрос, кто последний раз использовал freeze или seal. Как итог: минус номер два JavaScript problems Знания размазаны по коду или сосредоточены в голове Большое желание (и возможность) написать костыль ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Желание костылять возникает из-за того, что сложный легаси код на JS провоцирует это делать и, что самое главное - позволяет это делать. Ещё одна проблема - ООП. Да, он имеет свои недостатки и сейчас модным становится ФРП, но, по моему мнению - если команда большая и кода много - необходима максимальная строгость. Например как сделать интерфейс на JS. Реальный пример со stackoverflow JavaScript problems function PersonInterface(proto,fnName){ setTimeout(function(){ if(typeof proto.getSurName !== 'function'){ throw new Error(fnName + ' has to implement getSurName'); } },100); } function implements(fn, implements,fnName){ implements(fn.prototype,fnName); } function Employer(){}; implements(Employer, PersonInterface,'Employer'); Employer.prototype.getSurName=function(){}; ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Страшно выглядит? Реальный ответ со stackoverflow, как реализовать интерфейсы JavaScript problems Знания размазаны по коду или сосредоточены в голове Большое желание (и возможность) написать костыль Слабая поддержка ООП ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Далее идут проблемы изоляцией, это четвёртая проблема JavaScript problems Знания размазаны по коду или сосредоточены в голове Большое желание (и возможность) написать костыль Слабая поддержка ООП Проблема с изоляцией и модульностью ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Ещё одна проблема - это изоляция. Когда много людей работают над одним кодом необходимы какие-то механизмы, которые изолируют их друг от друга. Да, для этого есть много разных библиотек, порой даже слишком много. Но на стыке случаются проблемы: мало документации и возможность написать как попало. Итого вывод: Summary: JS is too weak ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike JS слишком слаб и мягок Solution: Dart ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Дарт Dart benefits: typing. Self-documented class Data{ bool userIsAdmin; // some other fields } Data getData(){ //... } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Дарт типизирован, что ведёт к тому, что он само-документирован. Можно кликнуть на любую структуру и узнать её свойства. Также это даёт автодополнение в IDE. Dart benefits: typing. Good analysis ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Также из плюсов - отличный, быстрый анализатор, который позволят карать Dart benefits: isolates library 'myAwesomeLibrary' import 'package:logging/logging.dart' show Logger, Level, LogRecord; import "package:test/test.dart" as test; export "package:utils/utils.dart"; class MyClass{ MyClass(){ test.Runner.begin(); } } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Изоляция кода в дарте позволяет организовывать библиотеки, нативно их экспортировать и импортировать. Также на это завязана приватность в классах. Есть zones Dart benefits: OOP abstract class Person { final _name; Person(this._name); String greet(who); } class Human { int getAge () => 14; } abstract class FruitLover { String getWhatILike () => 'Banana!'; } class Developer extends Human with FruitLover implements Person { final _name; Developer(this._name); @override int getAge () => 23; String greet(who) => 'Hi $who. I am $_name, ${getAge()} years old, i like ${getWhatILike()}'; } ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike ООП в Дарт поддерживает всё что надо и даже больше, есть mixins! Dart benefits Богатая стандартная библиотека (пакетный менеджер, сборщик etc.) Скорость работы Не только JS разработчики могут писать код Выкидывает лишний код, а значит быстрее грузится ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Остальные плюсы Dart Dart vs TypeScript ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Почему не TS: язык ничто, окружение - всё! У дарта богаче стандартная библиотека. Он строже. TS позволяет писать на нём так же плохо, как и на JS. Ну и если Dart не взлетит - всё можно транслировать без проблем. Дарт проповедует парадигму Java - написано один раз, компилируется множество. Если выходит новый стандарт - мы просто перекомпилимся. Q&A ‹#› Javascript in big project, Evgeny Gusev, 03.02.16 slide Wrike Вопросы
Comments
Top