Следующее – только некоторые вещи, которые мне нашел интересными, когда я глубже погружаюсь в мир JavaScript.
Некоторый фон
В Bloomberg я работаю с командой DevOps/Infrastructure, которая очень активно занимается аппаратным обеспечением, сетью и сценариями. Это означает, что все в моей команде очень хороши в Bash, Ansible и Python, и, вероятно, могут выбросить больше сетевых сокращений, чем секунд в день.
Вскоре после того, как я присоединился, мы начали думать о веб -панели управления, которая будет управлять и автоматизировать многие из наших ручных процессов и задач. Мы планировали все функции, чтобы включить, и это должно было быть Так круто … За исключением того, что я был единственным в команде, которая знала что -нибудь о веб -разработке, и даже это была свободная ассоциация.
Моим предыдущим опытом было написание бэкэндов и API для веб -компаний, но у меня действительно не было опыта на передней части вещей. Для этого проекта веб -панели я хотел по -настоящему погрузиться и научиться правильно реагировать, создав полное приложение самостоятельно.
Что я выучил
Ниже приведены лишь некоторые вещи, которые я узнал или нашел интересные о JavaScript, React и Front End Development, исходящем с точки зрения Python и Backend. Обратите внимание, что я строю приложение React, поэтому многие из этих вещей сильно вращаются вокруг библиотеки.
NPM DEV зависимости от зависимостей
Я действительно не понял этого, пока не начал создавать изображения Docker для моего приложения для экспресс-реакции. В Python у меня всегда был бы dev-requirements.txt Файл, который содержал мои библиотеки тестирования и линии и Требования.txt Это держало все другие зависимости. Действительно приятно, что оба они остаются в Package.json , Очистка структуры проекта и облегчение автоматизации установки.
Структура не имеет значения, пока она работает
При разработке я постоянно перемещаю файлы и папки, пытаясь достичь лучшей структуры проекта. У меня всегда есть мышление Будет ли это работать, если я добавлю больше вещей? , и это обычно приводит к бесконечной кроличьей дыре управления структурой проекта вместо кодирования.
То, что я узнал из разных постов в Интернете, и, по своему собственному опыту, React не заботится о том, какую структуру проекта вы используете, и поэтому вы тоже. Очевидно, что старайтесь держать его в чистоте и организованную, но, кроме того, если что -то работает для вас, не беспокоитесь о том, чтобы рефактировать его, пока не придется. Я фанат моей текущей структуры папок, которая выглядит примерно как следующее. Обратите внимание, что я пропустил файлы.
. ├── __mocks__ ├── bin # Scripts needed to run Docker image ├── certs # Any certs I need for local dev. These are mounted to container ├── dist # Build directory ├── screenshots ├── src │ ├── assets # Non-JS or styling assets │ │ ├── images │ │ └── jss # I use MaterialUI, which styles using JSS │ ├── components # General use components │ │ └── hoc # Higher order components │ ├── config # Configuration file for server that loads env to object │ ├── core # Anything that is crucial to the React app │ │ ├── layout # Core layout components │ │ │ ├── header │ │ │ └── sidebar │ │ ├── pages # Not Found / Landing pages │ │ ├── state # Core managed state, aka users and theme │ │ │ ├── auth │ │ │ └── meta │ │ └── util # Any usable themes │ ├── pages # List of top level React Router routes as 'pages' │ ├── server # All code pertaining to the Express server │ └── tests # All tests └── webpack # Webpack configs for server and client
Государственное управление/чистящие компоненты
Управление государством в Python для меня на самом деле не существует, особенно если оно для большего количества сценариев. Я обычно предпочитаю композицию по сравнению с наследством, но это всегда было из -за того, что я узнал в школе. Написание компонентов React действительно выделяло эту идею.
Компоненты состоят из меньших, возможно, многоразовых компонентов, которые каждый уровень в иерархии отвечает за рендеринг и/или поддержание определенной части применения. Это действительно классное чувство – уменьшить кодовые линии, потому что я узнал умные способы, которыми компоненты были либо связаны, либо могли составлять друг друга.
Вся идея эффекта водопада с реквизитом и состоянием от родительских компонентов действительно классная, чтобы увидеть вживую, как только вы поймете, что происходит. Это было то, что я не понял сначала, но мой код и отношения между компонентами стали намного лучше, поскольку я понял правильное управление государством.
Обещания сначала сбивают с толку.
Исходя из синхронного мира питона/сценариев, JavaScript обещания сделаны нулевой смысл Для меня примерно 3 дня назад, так что не ненавидите, если мои примеры ниже все еще плохие. Долгое время я пытался дать обещания синхронным, и я был бы настолько смущен тем, почему такие вещи, как следующее, вернули обещание.
function fetchSomething() {
const fetchURL = '/something';
return axios.get(fetchURL); // returns a promise
}
// Handling the axios call like a synchronous
// function leds to tons of horrible callback
// and uncaught promise exceptions 🤷🏼♂️
function getSomethingHandler(callback) {
fetchSomething()
.then(response => { callback(response.data) })
}
Но теперь я понимаю все тогда (обратный вызов) , Catch (Errcallback) поток, и это делает намного больше смысла Анкет На следующей итерации я переписал его как следующее, что немного лучше:
function fetchSomething() {
const fetchURL = '/something';
return new Promise((resolve, reject) => {
axios.get(fetchURL)
.then(response => { resolve(response.data) })
.catch(error => { reject(error) })
});
}
// Handling the axios call like a synchronous
// function leds to tons of horrible callback
// and uncaught promise exceptions 🤷🏼♂️
function getSomethingHandler(callback) {
fetchSomething()
.then(data => { res.send(data) }) })
}
Эта версия остановила многие из этих исключений обратного вызова и обещания. Это также позволило моим функциям обработчика ожидать, что данные, которые уже переведены в мой желаемый формат с помощью функций выбора. Наконец, я начал использовать асинхро и Ждите . Я все еще сомневаюсь в этом, поэтому я прошу прощения, если следующее не правильно.
async function fetchSomething() {
const fetchURL = '/something';
try {
// Wait for the axios promise to resolve
const response = await axios.get(fetchURL);
return response.data;
} catch (err) {
console.log(err)
return err;
}
}
function getSomethingHandler(callback) {
fetchSomething()
.then(data => { res.send(data) }) })
}
Я все еще активно узнаю больше об этом асинхронном рабочем процессе, но пока это довольно круто.
Бонус CSS: Flexbox потрясающий
Больше вещей CSS, но одним из основных факторов, которые мешали мне попасть в дизайн переднего конца, было связано с выравниванием элементов и размерами. Независимо от того, что маржа s или Выровнять Ценности, которые я положил, казалось, ничего не сработало. Это был мой первый настоящий опыт игры с Flexbox в CSS3 и О, щелчок Это имеет мир разницы. Между Flex-Row , Flex-Basis , оправдать и Выравнивающие элементы , позиционирование вещей в HTML намного проще.
Закрытие
Хотя я мог бы поговорить о гораздо больше вещей, это были некоторые из самых важных событий, которые я имел с JavaScript, Express и React за последние несколько месяцев. Я мог бы написать второй пост в будущем, когда мой проект созревает.
Спасибо за чтение 👍😃
Оригинал: “https://dev.to/dstarner/lessons-learned-python-to-javascript-4lae”