Не JS во фронтенде

Не JS во фронтенде
© Максим Самойлов
twitter.com/_nitive
github.com/nitive

Как всё начиналось

<script>
document.getElementById('button')
.onclick = function () {
startSnowfall()
}
</script>
JavaScript появился в 1995

jQuery
// app.js
$('form')
.on('submit', function (event) {
if (isFormInvalid(form)) {
event.preventDefault()
showErrors()
}
})

XMLHttpRequest
Backend --> Frontend

XMLHttpRequest
Backend --> Frontend
Рендеринг
шаблонов
Роутинг
Формы
…

$ tree .
components/
└─ button/
├─ index.js
└─ style.css
pages/
├─ main.js
└─ search.js
actions/
reducers/
api/
utils/
styles/
store/
Фреймворки
Сборщики

«JS был обязан «выглядеть как Java»,
только поменьше, быть эдаким
младшим братом-тупицей для Java.
Кроме того, он должен был быть
написан за 10 дней, а иначе мы бы
имели что-то похуже JS»
Brendan Eich

'[object Object]'
undefined is not a function
return 
{ key: 'value' }; // return undefined
[].slice.call(arguments)

'[object Object]'
undefined is not a function (Chrome)
return 
{ key: 'value' }; // return undefined
[].slice.call(arguments) (ES2015)

Нам нужен
новый язык

А зачем?
-> Типизация
-> Иммутабельные структуры данных
-> Макросы
-> Скорость
-> Удобный синтаксис
-> Другие абстракции

Первый
претендент
− JavaScript
+ EcmaScript 2016+
Модульность
Синтаксический сахар
Новые структуры данных
Промисы
…

Надстройки над
JavaScript
TypeScript
CoffeeScript
Dart

TypeScript
function sum( ...nums: number []) {
return nums.reduce(
(acc, x) => acc + x
)
}
Только типы, ничего нового

Языки, меняющие
парадигмы
Elm
ClojureScript

Elm
filter : (a -> Bool) -> List a -> List a
filter pred list =
case list of
x ::xs ->
let
rest = filter pred xs
in
if pred x
then x :: rest
else rest
[] -> []
Что это вообще? %)

Клоны знакомых
языков
Часто просто поделки

Python
print([x ** 2 for x in [1, 2, 3]])
console.log(function () {
var modified = [], arr = [1, 2, 3]
for (var i = 0; i < arr.length; i += 1) {
var x = arr[i]
modified.push(Math.pow(x, 2))
}
return modified
}
.call(this))
-->
Экономим строки

$ tree .
actions/
└─ counter.js
constants/
└─ counter.js
reducers/
└─ counter.js
1. Шаблонный код

// constants/counter.js
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
// actions/counter.js
import {
INCREMENT, DECREMENT
} from ' ../constants/counter.js'
export const increment = () => ({
type: INCREMENT,
})
export const decrement = () => ({
type: DECREMENT,
})

// reducers/counter.js
import {
INCREMENT, DECREMENT
} from ' ../constants/counter.js'
export const reducer =
(state = 0, action) => {
switch (action.type) {
case INCREMENT:
return state + 1
case DECREMENT:
return state - 1
default:
return state
}
}

type Msg
= Increment
| Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment -> model + 1
Decrement -> model - 1

This is MAJOR change
—————— Changes to module Html.Attributes — MAJOR ——————
Changed:
- colspan : String -> Attribute
+ colspan : Int -> Attribute
2. Обязательное семантическое
версионирование

Легко делать изменения
3. Типизация
type alias Coords =
{ x : Int
, y : Int
}

type alias Coords =
{ x : Int
, y : Int
, z : Int
}
Легко делать изменения
3. Типизация

The type annotation for `coords` does not match its
definition.
18| coords : Coords
^^^^^^
The type annotation is saying:
{ x : Int, y : Int, z : Int }
But I am inferring that the definition has this type:
Int -> Coords
Detected errors in 1 module.

В итоге
-> Учите новые языки
-> Используйте хотя бы EcmaScript 2016
-> Не тащите модные языки в продакшн
-> Выбирайте язык под задачу, а не
подгоняйте задачу под любимый язык

Не JS во фронтенде

More Related Content

Similar to Не JS во фронтенде (20)

Не JS во фронтенде