У версії Typescript 2.0 був доданий модифікатор readonly. Властивостями поміченим модифікатором readonly значення може бути присвоєно тільки в момент ініціалізації, або в конструкторі того ж класу. Будь-які інші присвоювання значення заборонені.
Давайте подивимося на приклад. Тут представлений простий тип Point, описуваний двома властивостями, доступними тільки для читання:
type Point = {
readonly x: number;
readonly y: number;
};
Тепер ми можемо створити об’єкт являє собою початок координат, і ініціалізувати x і y багатозначно 0:
const origin: Point = { x: 0, y: 0 };
Однак, так як властивості x і y позначені readonly, ми не можемо змінити їх значення згодом:
// Error: Left-hand side of assignment expression // cannot be a constant or read-only property origin.x = 100;
Наведений вище приклад може здатися надуманим, давайте розглянемо наступну функцію:
function moveX(point: Point, offset: number): Point {
point.x += offset;
return point;
}
Функція moveX не повинна змінювати властивість xпереданого об’єкта point. Компілятор TypeScript обов’язково почне лаятися, якщо ви спробуєте це зробити, так як властивість позначено модифікатором readonly. Замість цього moveX повинна повертати новий об’єкт зі зміненими значеннями:
function moveX(p: Point, offset: number): Point {
return {
x: p.x + offset,
y: p.y
};
}
Тепер компілятор буде щасливий, більше немає спроб привласнити значення властивостям поміченим readonly. Ми створили новий об’єкт, який ініціалізується за оновленими значеннями.
Ви також можете застосовувати модифікатор readonlyдо властивостей описаних в класі. Тут представлений клас Circle з readonly полем radius і властивістю area, яке непрямим чином реалізує доступність тільки для читання, тому що не має сетера:
class Circle {
readonly radius: number;
constructor(radius: number) {
this.radius = radius;
}
get area() {
return Math.PI * this.radius ** 2;
}
}
Зверніть увагою, що area обчислюється за допомогою оператора піднесення до степеня. І radius, і area доступні ззовні класу для читання, тому що жоден з них не позначений як private, але не для запису:
const unitCircle = new Circle(1); unitCircle.radius; // 1 unitCircle.area; // 3.141592653589793 // Error: Left-hand side of assignment expression // cannot be a constant or read-only property unitCircle.radius = 42; // Error: Left-hand side of assignment expression // cannot be a constant or read-only property unitCircle.area = 42;
Поля інтерфейсів також можуть позначені, як доступні тільки для читання. Наприклад, тип ReadOnlyArray<T> запобігає запис значень в описані властивості:
interface ReadonlyArray<T> {
readonly length: number;
// ...
readonly [n: number]: T;
}
Наступне присвоювання буде невалідним:
const primesBelow10: ReadonlyArray<number> = [2, 3, 5, 7]; // Error: Left-hand side of assignment expression // cannot be a constant or read-only property primesBelow10[4] = 11;
Модифікатор readonly – це частина системи типів TypeScript. Він використовується тільки компілятором для перевірки незаконних присвоєнні значень. Як тільки TypeScript код компілюється в JavaScript таке поняття, як readonl піде геть.
Так як модифікатор readonly – це тільки артефакт при компіляції, він не є захистом від присвоювання значень під час виконання коду. Проте це ще одна особливість TypeScript, яка допоможе вам писати правильний код, залишивши компілятору роботу по перевірці ненавмисних присвоєнь значень.
Переклад статті “TypeScript 2.0: Read-Only Properties“
Вийшло невелике оновлення JS-фреймворка Angular 5.1. У список поліпшень входять стабільні версії Angular Material і CDK, підтримка Service Worker API в CLI і підтримка TypeScript 2.5.
Після виходу мажорного релізу Angular 5.0 минулого місяця команда оголосила про випуск коригуючого поновлення Angular 5.1.0, в якому з’явилося кілька дрібних фич і виправлені деякі помилки. Також був випущений Angular CLI 1.6 і представлена перша стабільна версія Angular Material.
Повний список функцій і виправлень можна подивитися на сторінках Angular, Material, і CLI.
Angular Material заснований на візуальному мовою Material Design від Google. Angular Material пропонує 30 компонентів для користувача інтерфейсу для створення додатків. Angular CDK являє собою набір компонентів для створення власних елементів, без необхідності вирішувати заново спільні завдання. Ці компоненти вже використовуються у виробництві поряд додатків Google, включаючи Google Analytics Suite , Google Cloud Platform Developer Console , і Google Shopping Express .
Починаючи з поточної версії, Angular Material буде дотримуватися тієї ж філософії SemVer, що і Angular. Основні версії Angular Material і Angular CDK виходитимуть одночасно з рештою платформою. Патч-релізи будуть випускатися з тижневими інтервалами, а другорядні випуски стануть доступні у міру готовності функцій.
Документація і посібник для початківців доступні на офіційному сайті. Також стежити за ходом роботи команди можна на сторінці проекту на GitHub.
У Angular 5.0.0 була включена підтримка Service Worker, адаптованої для Angular-додатків. Angular CLI 1.6 підтримує функції, які залежать нову функцію. За твердженням команди розробників, використання @angular/service-worker може підвищити продуктивність завантаження додатків в браузерах, які підтримують даний API.
Детальніше про початок роботи c Angular Service Worker можна ознайомитися на сайті.
З виходом Angular CLI 1.6 доопрацьована можливість впровадження Universal в існуючі проекти через Schematics. Також додана підтримка App Shell.
Наступна команда дозволяє додати підтримку Universal в існуюче CLI-додаток:
ng generate universal
Це створить модуль Universal в поточному додатку і автоматично сконфигурирует файл angular-cli.json.
Створити Universal додаток:
ng build --app=
З додаванням підтримки архітектури App Shell, з’явилася можливість створити оболонку додатки, яка створить статичний «перший екран» під час завантаження програми.
Спочатку необхідно імпортувати RouterModule в NgModule додатки, а <router-outlet></router-outlet> в шаблон компонента програми. App Shell використовує маршрутизатор для рендера додатки.
Потім запускається команда:
ng generate app-shell [ --universal-app
Далі необхідно зібрати додаток використовуючи ng build і маршрут з вашого застосування має активізуватися в index.html файл.
Діагностика компілятора значно покращилася, особливо в тих випадках, коли декоратори містять не підтримуються або некоректні висловлювання.
Наприклад, виклик функції для створення шаблону не тримається
@Component({
template: genTemplate()
})
export class MyComponent {}
Раніше це викликало б наступну помилку:
Error encountered resolving symbol values statically. Calling function ‘genTemplate’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts
Повідомлення про помилку було доопрацьовано і тепер пояснює джерело і причину проблеми:
component.ts(9,16): Error during template compile of 'MyComponent'. Function calls are not supported in decorators but 'genTemplate' was called.
Додана підтримка TypeScript 2.5. Цей випуск TypeScript включає кілька корисних розширених функцій. Оновити TypeScript можна, запровадивши таку команду:
yarn add typescript@'~2.5.3'or npm install typescript@'~2.5.3'.
Але дана дія не є обов’язковим, оскільки TypeScript 2.4 продовжує підтримуватися Angular 5.xx Підтримку TypeScript 2.6 команда планує додати в наступному оновленні.
Переклад статті “Angular 5.1 & More Now Available“
Всі розробники веб-браузерів всього лише протягом 2 років змогли впровадити в свої продукти підтримку WebAssembly.
Робота над WebAssembly почалася в 2015 році, коли розробники основних веб-браузерів об’єднали зусилля для створення бінарного формату (байт-коду) для мережі Інтернет.
Перевага байт-коду полягає в тому, що він в кілька разів менше в розмірі, ніж код, з якого він був скомпільований. Це означає, що бінарний формат може бути використаний для економії трафіку і збільшення швидкості завантаження сторінки сучасних сайтів і веб-додатків.
Інший плюс використання байт-коду полягає в легкості, з якою сучасні веб-браузери можуть його прочитати. Тим самим забезпечуються краще структурування формату даних і швидкий парсинг коду.
На додаток до всього вищесказаного, розробники зможуть писати код на С, С ++ або Rust і компілювати його в байт-код безпосередньо без необхідності проміжного перекладу в JavaScript-код.
З моменту анонса єдиного бінарного формату WebAssembly став шалено популярний в індустрії онлайн-ігор. З його допомогою стало можливим створення більш просунутих ігрових движків, які могли конкурувати зі своїми настільними аналогами.
Саме тому розробники Mozilla оголосили WebAssembly фактором, що змінює правила гри в світі інтернету. Позитивні риси нового стандарту і потенційний прибуток, яку він міг принести, стали каталізатором всієї роботи.
Незважаючи на деякий скепсис щодо нового стандарту і його життєздатності, в жовтні 2016 року Google, Microsoft і Mozilla вже представили превью-версії своїх браузерів з підтримкою байт-коду. А в березні 2017 року роботу з впровадження стандарту була закінчена. Таким чином, браузери почали використовувати WebAssembly за замовчуванням, щоб протестувати його в реальних умовах.
Протягом літа 2017 року Firefox і Chrome стали першими великими браузерами, які отримали підтримку WebAssembly в своїх стабільних версіях. В Opera і Vivaldi також була впроваджена функціональність, як тільки вона була додана в стабільні версії Chromium. Одними з останніх, хто ввів WebAssembly в стабільні гілки браузерів Safari 11.0 і Edge, стали відповідно Apple і Microsoft.
В даний час стандарт має гучний успіх – він уже впроваджений у багатьох іграх Facebook завдяки потужним ігровим движкам, випущеним такими компаніями, як Unity і Epic. Однак WebAssembly вже зробив собі ім’я і в світі зловредів. Як стверджують експерти, Майнер криптовалюта, такі як Coinhive і CryptoLoot, не були б можливі без впровадження нового стандарту в усі браузери.
Дізнатися більше про бінарному форматі можна з цього відео:
Переклад статті “All Major Browsers Now Support WebAssembly“
У TensorFlow 1.4 розробники додали кілька нових функцій, а також підтримку Dataset API і Estimator API.
7 листопада компанія Google анонсувала вихід нової версії TensorFlow, яка включає в себе кілька нових функцій і підтримку нижчезгаданих API.
У TensorFlow 1.4 Keras переїхала з tf.contrib.kerasв ядро пакета tf.keras. Keras – це популярна бібліотека для машинного навчання, написана на Python. Вона включає в себе високорівневі API для спрощення реалізації ідей розробників. Бібліотека сумісна з функціональними можливостями TensorFlow, включаючи API Estimator. Розробники можуть створювати Estimator’и, використовуючи будь-яку модель Keras, за допомогою функції tf.keras.estimator.model_to_estimator.
Google повідомила, що Dataset API також був доданий в ядро пакета tf.data (з tf.contrib.data). Цей API привносить підтримку генераторів Python. Розробники рекомендують використовувати його при створенні вхідних конвеєрів для моделей TensorFlow, оскільки він дозволяє використовувати більше можливостей, працює краще і простий у використанні. Google зосередиться на розвитку Dataset, а не інших аналогічних API.
У TensorFlow 1.4 була додана функція tf.estimator.train_and_evaluate, яка спрощує навчання, оцінку і експорт моделей Estimator. Вона дозволяє виконувати процеси навчання і оцінки як локально, так і розподілений.
Нову версію можна встановити за допомогою pip.
# Note: the following command will overwrite any existing TensorFlow # installation. $ pip install --ignore-installed --upgrade tensorflow # Use pip for Python 2.7 # Use pip3 instead of pip for Python 3.x
Також розробники оновили документацію на сайті проекту.
Переклад статті “Announcing TensorFlow r1.4“
Ми раді оголосити версію 5.0.0 Angular, pentagonal-donut. Це основний реліз, що містить нові функції та виправлення помилок. Цей реліз продовжує концентруватися на тому, щоб зробити Angular меншим, швидшим і простішим у використанні.
Ось розбивка деяких найбільших змін у v5. Для повного списку перегляньте історію змін.
Станом на 5.0.0, виробничі збірки, створені за допомогою CLI, за замовчуванням застосують оптимізатор збірки.
Оптимізатор збірки – це інструмент, який входить до нашого CLI для зменшення розшарування, використовуючи наше семантичне розуміння Вашого кутового застосування.
Оптимізатор збірки має дві основні завдання. По-перше, ми можемо відзначити частину вашої програми, оскільки pure це покращує струс сорочки, що забезпечується існуючими інструментами, видалення додаткових частин вашої програми, які не потрібні.
Друга справа, що робить оптимізатор збірки, полягає в тому, щоб видалити Angular декоратори з коду виконання програми. Декоратори використовуються компілятором, і не потрібні під час виконання, і їх можна видалити. Кожна з цих завдань зменшує розмір ваших пакетів JavaScript і збільшує швидкість завантаження вашої програми для ваших користувачів.
Тепер ви можете легше розділити стан програми між сторонніми та клієнтськими версіями вашої програми.
Angular Universal – це проект, спрямований на те, щоб допомогти розробникам виконувати серверну обробку (SSR) кутових програм. Після того, як ви зробите свої Angular програми на сервері, а потім завантажите їх у горі сгенерированного HTML, ви можете додати підтримку скребків і сканерів, які не підтримують JavaScript, і ви можете збільшити сприйману продуктивність вашої програми.
У 5.0.0 команда додала ServerTransferStateModuleі відповідну BrowserTransferStateModule. Цей модуль дозволяє генерувати інформацію як частину вашого рендеринга на платформі-сервері, а потім перенести його на сторону клієнта, щоб ця інформація не потребувала регенерації. Це корисно для випадків, наприклад, коли ваша програма отримує дані через HTTP. Передаючи стан з сервера, це означає, що розробникам не потрібно робити другий HTTP-запит, як тільки програма передасть її клієнту. Документація для State Transfer має відбутися протягом наступних кількох тижнів.
Іншою зміною від команди Angular Universal є додавання Domino на платформер-сервер. Domino означає, що ми підтримуємо більше маніпуляцій DOM з коробки в контексті серверної сторони, покращуючи нашу підтримку сторонніх JS та компонентних бібліотек, які не відомі на стороні сервера.
Ми вдосконалили Angular компілятор, щоб підтримувати поступову компіляцію. Це забезпечує швидке перебудову, особливо для виробничих збірок та збірок з AOT. Ми також додали функції для наших декораторів та дозволили поставити менші пакети, видаливши пробіл.
Під капотом Angular компілятор тепер працює як перетворення TypeScript, що робить поступові перебудови значно швидше. TypeScript перетворення були новою функцією, представленою як частина TypeScript 2.3, що дозволяє нам зачепитись до стандартного контуру компіляції TypeScript.
Ви можете скористатись цим, запустивши ng serve прапорець AOT.
ng serve --aot
Ми рекомендуємо кожному спробувати це. Це стане типовим для майбутнього випуску CLI. Існують деякі відомі проблеми зі швидкістю з проектами з більш ніж тисячею компонентів. Ми хочемо бути впевненими, що проекти будь-якого розміру зазнають цих покращень.
Під час виконання інкрементного побудови AOT з https://angular.io, новий конпілятор компілятора зберігає 95% часу збирання (від більш ніж 40 секунд до менше 2 секунд на наших машинах розробки).
Нашою метою було зробити компіляцію AOT достатньо швидко, щоб розробники могли використовувати її для розробки, усунувши ті відмінності, які розробники іноді стикаються, коли вперше намагаються перейти до виробництва. Команда набрала свої 2-секундні інкрементні AOT перебудовувані цільові показники, і за замовчуванням вона буде перетворювати AOT у майбутній випуск CLI.
У рамках цього переходу на перетворення ми більше не потребуємо genDir і outDir змінилися: тепер ми завжди випромінюємо створені файли для пакетів в node_modules.
Історично вклади, нові рядки та пробіли у ваших шаблонах були точно відтворені та включені в вашу збірку компілятором. Тепер ви можете вибрати, чи зберегти пробіл, що йде від ваших компонентів та вашої програми.
Ви можете вказати це як частину декоратора кожного компонента, де на даний момент він за замовчуванням true.
@Component({
templateUrl: 'about.component.html',
preserveWhitespaces: false
}
export class AboutComponent {}
Або ви можете вказати його широке застосування у своєму tsconfig.json, де воно також за замовчуванням true.
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"angularCompilerOptions": {
"preserveWhitespaces": false
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
Загалом, специфікації на рівні компоненту перевищують загальні специфікації. Надалі команда сподівається на дефолт, щоб за замовчуванням false економити місце для розробників. Не турбуйтеся про свої <pre> теги, вони розумно обробляються.
Дізнайтеся більше про preserveWhitespaces на нашому сайті docs.
Тепер ми підтримуємо expression lowering в декоратор для лямбда і вартості useValue, useFactory і data в об’єкті літералах. Це дозволяє використовувати значення, які можна обчислити лише під час виконання в декораторах для виражених полів.
Тепер ви можете використовувати лямбда замість названої функції, тобто ви можете виконати код, не впливаючи на ваш d.ts або ваш загальнодоступний API.
Component({
provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}
Ми також знизимо вирази в рамках useValue.
Component({
provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}
Ми створили нові Number, Date та Currency Pipes, які підвищують стандартизацію через браузери та усувають потребу в i18n polyfills.
У Angular ми покладалися на браузер, щоб надавати форматування Number, Date та Currency Pipes за допомогою API i18n браузера. Це призвело до того, що більшість розробників потребували заповнення polyfills, що означало, що користувачі бачили в різних веб-переглядачах суперечливі результати, і ми отримали коментарі, які звичайні формати (наприклад, Currency Pipes) не відповідали очікуванням розробника.
У 5.0.0 ми оновили pipes, щоб використовувати нашу власну реалізацію, спираючись на CLDR, щоб забезпечити велику підтримку та конфігурацію мов для будь-яких локалей, які ви хочете підтримати. Ми підготували документ, який порівнює поведінку pipes між v4 та v5.
Якщо ви не готові до нових pipes, ви можете імпортувати, DeprecatedI18NPipesModule щоб отримати доступ до старої поведінки.
Дізнайтеся більше про зміни в наших pipes i18n в журналі змін.
ReflectiveInjector за допомогою StaticInjectorДля того, щоб видалити ще більше поліфліків, ми замінили ReflectiveInjector на StaticInjector. Цей інжектор більше не вимагає Reflect polyfill, зменшуючи розмір програми для більшості розробників.
ReflectiveInjector.resolveAndCreate(providers);
Injector.create(providers);
За умовчанням ми зробили Zone швидше, і ми дозволили повністю обходити Zone для програм, орієнтованих на продуктивність.
Щоб обійти Zone, завантажте вашу програму з “noop” як ваш ngZone.
platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );
Для повного прикладу, перегляньте приклад проекту ng-component-state.
Ми додали підтримку для декількох імен для ваших компонентів / директив. Це може бути дуже корисним для того, щоб допомогти користувачам мігрувати без порушення змін. Виводячи директиву з декількома іменами, ви можете створювати нові імена в Angular microsyntax, не порушуючи існуючий код. Це було використано як частина проекту Angular Material при міграції префікса, а також може допомогти іншим авторам компонентів.
Приклад
@Component({
moduleId: module.id,
selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
exportAs: 'matButton, matAnchor',
.
.
.
}
У версії 4.3 ми поставили HttpClient @angular/common як менший, простий та потужний спосіб зробити веб-запити на Angular. Новий HttpClient отримав велику похвалу від розробників, тому ми зараз рекомендуємо HttpClient для всіх програм і припиняємо попередню @angular/http library.
Для поновлення HttpClient, вам необхідно замінити HttpModule з HttpClientModule від @angular/common/http кожного з ваших модулів, вводять послугу HttpClient і видаліть всі map(res => res.json()) виклики, які більше не потрібно.
Починаючи з v1.5 Angular CLI, ми додали підтримку для Angular v5.0.0 і за замовчуванням генеруємо v5 проекти.
За допомогою цього другорядного релізу ми за замовчуванням включили Оптимізатор збірки, тому розробники можуть скористатися меншими розшаруваннями.
Ми також оновлюємо спосіб, яким ми використовуємо .tsconfig файли для більш точного дотримання стандартів TypeScript. Раніше, коли ми виявили лінький завантажений маршрут, і ви вручну вказали список files або include у вашому списку tsconfig.json, ми автоматично додамо ці маршрути, але тепер ми дотримуємось специфікації TypeScript і далі виконуємо це. За замовчуванням CLI налаштовує TypeScript без files або include розділів, тому більшість розробників не будуть залежати від цього.
Тепер ви можете запускати перевірку та оцінку оновлень на blur або на submit, а не на кожній вхідній події.
Форми є дуже важливою частиною багатьох застосувань, і якщо у вас є якісь перевірки на стороні сервера або будь-які більш важкі процеси, що спрацьовують при перевірці або змінах значення, які ви хочете виконувати рідше, тепер ви можете контролювати зміну валідації та значення час на контрольному рівні або вкажіть його для всієї форми.
Крім того, тепер ви можете вказати asyncValidators безпосередньо в об’єкті параметрів, а не вказувати його як третій параметр.
до
<input name="firstName" ngModel>
після
<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
або
<form [ngFormOptions]="{updateOn: 'submit'}">
до
new FormGroup(value); new FormControl(value, [], [myValidator])
після
new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
Ми оновили наше використання RxJS до версії 5.5.2 або пізнішої версії. Цей нещодавній випуск RxJS повністю надає розробникам можливість уникнути побічних ефектів від попереднього механізму імпорту з новим способом використання RxJS під назвою “lettable operators“. Ці нові оператори усувають побічні ефекти та проблеми розбиття коду / дерева, які існували за допомогою попереднього методу імплементації операторів.
Замість
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);
Тепер ти можеш
import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
map(user => user.name),
filter(name => name),
);
Крім того, RxJS тепер розподіляє версію за допомогою модулів ECMAScript. Новий кутовий CLI буде запускати цю версію за замовчуванням, значно заощаджуючи розмір розшарування. Але якщо ви не використовуєте Angular CLI, ви все одно повинні вказувати на новий розповсюдження. Документацію можна знайти в розділі “Build and Treeshaking” документації операторів, що надають путівник.
Ми додали маршрутизаторам нові етапи життєвого циклу, що дозволяє розробникам відстежувати цикл маршрутизатора від початку роботи охоронців до завершення активації. Ці події можуть бути використані для таких речей, як показує обертання на певному outlet маршрутизатора, коли child оновлюється, або для вимірювання ефективності guards та / або resolvers.
Нові події (в послідовності) є GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd. Приклад використання цих подій для запуску / зупинки поворотника може виглядати наступним чином:
class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}
Ми створили керівництво по оновленню Angular, щоб допомогти вам проаналізувати цей процес і дізнатись про будь-які зміни, які ви хочете зробити у своєму коді перед початком процесу оновлення, інструкціями щодо оновлення додатка та інформацією про підготовку майбутніх версій Angular.
Ми видалили багато застарілих інтерфейсів API (як OpaqueToken) і випустили кілька нових застарілих API. Цей посібник допоможе вам проаналізувати зміни, які вам доведеться внести до вашої програми.
https://github.com/angular/angular/issues/19840
Переклад статті “Version 5.0.0 of Angular Now Available“
За цей рік, в процесі реорганізації Instagram Web, ми насолодилися використанням ряду особливостей ES6+, при написанні нашх React компонентів. Дозвольте мені зупинитися на тих моментах, коли нові можливості мови можуть вплинути на те як ви пишете React додатки, і зроблять цей процес легше і веселіше, ніж коли-небудь.
До цих пір найбільш помітним з видимих змін в тому, як ми пишемо наші React компоненти, використовуючи ES6 + є те, що ми вирішили використовувати синтаксис визначення класу. Замість того щоб використовувати метод React.createClass для визначення компонента, ми можемо визначити справжній ES6 клас, який розширює клас React.Component:
class Photo extends React.Component {
render() {
return <img alt={this.props.caption} src={this.props.src} />;
}
}Ви відразу ж ви помітите невелике розходження – вам стає доступним більш лаконічний синтаксис визначення класу:
// The ES5 way
var Photo = React.createClass({
handleDoubleTap: function(e) { … },
render: function() { … },
});// The ES6+ way
class Photo extends React.Component {
handleDoubleTap(e) { … }
render() { … }
}Варто зазначити, що ми відкинули дві дужки і завершальну крапку з комою, а для кожного оголошеного методу ми опускаємо двокрапка, ключове слово function і кому.
Всі методи життєвого циклу компонента, крім одного можуть бути визначені, як можна було б очікувати, з використанням нового синтаксису визначення класів. Конструктор класу в даний час виступає в ролі раніше використовуваного методу componentWillMount:
// The ES5 way
var EmbedModal = React.createClass({
componentWillMount: function() { … },
});// The ES6+ way
class EmbedModal extends React.Component {
constructor(props) {
super(props);
// Operations usually carried out in componentWillMount go here
}
}У світі класів ES6 +, типи властивостей і значення за замовчуванням можуть існувати як статичні властивості цього класу. Ці змінні, а також початковий стан компонента, можуть бути визначені з використанням ES7 ініціалізаторів властивостей:
// The ES5 way
var Video = React.createClass({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
getInitialState: function() {
return {
loopsRemaining: this.props.maxLoops,
};
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
});// The ES6+ way
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}
state = {
loopsRemaining: this.props.maxLoops,
}
}Ініціалізатор властивостей ES7 працюють усередині конструктора класу, де this відноситься до поточного екземпляру класу перед його створенням. Завдяки цьому, початковий стан компонента може залежати від this.props. Примітно, що ми більше не повинні визначати значення props за замовчуванням і початковий стан об’єкта в термінах getter функції.
Метод React.createClass використовується для виконання деяких додаткових робіт по прив’язці до методів екземпляра компонента, щоб переконатися, що всередині них, ключове слово this буде ставитися до примірника компонента.
// Autobinding, brought to you by React.createClass
var PostInfo = React.createClass({
handleOptionsButtonClick: function(e) {
// Here, 'this' refers to the component instance.
this.setState({showOptionsModal: true});
},
});Так як ми не пов’язані використанням методу React.createClass, при визначенні компонентів синтаксисом класів ES6+, здавалося б, що нам потрібно вручну прив’язати методи екземпляра, туди де ми хочемо їх використовувати:
// Manually bind, wherever you need to
class PostInfo extends React.Component {
constructor(props) {
super(props);
// Manually bind this method to the component instance...
this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
}
handleOptionsButtonClick(e) {
// ...to ensure that 'this' refers to the component instance here.
this.setState({showOptionsModal: true});
}
}На щастя, шляхом об’єднання двох можливостей ES6+ – arrow функції і ініціалізатор властивостей – відмова від прив’язки до примірника компонента стає дуже легким:
class PostInfo extends React.Component {
handleOptionsButtonClick = (e) => {
this.setState({showOptionsModal: true});
}
}Тіло ES6 arrow функцій використовує той же лексичне this як і код, який її оточує. Це дозволяє нам досягти бажаного результату через те, що ES7 ініціалізатор властивостей знаходяться в області видимості. Загляньте під капот, щоб зрозуміти чому це працює.
Одним з удосконалень литералов об’єктів включає в себе можливість призначати похідні імена властивостями. Спочатку ми могли б зробити щось подібне для установки деякої частини стану компонента:
var Form = React.createClass({
onChange: function(inputName, e) {
var stateToSet = {};
stateToSet[inputName + 'Value'] = e.target.value;
this.setState(stateToSet);
},
});Тепер у нас є можливість створювати об’єкти, в яких імена властивостей визначаються виразом JavaScript під час виконання. Тут ми використовуємо шаблонні рядки, для того щоб визначити, яке властивість встановити в стані компонента:
class Form extends React.Component {
onChange(inputName, e) {
this.setState({
[`${inputName}Value`]: e.target.value,
});
}
}Часто при створенні компонентів, ми могли б передати більшість властивостей батьківського компонента до дочірньому компоненту, але не всі з них. У поєднанні ES6 + деструктурірованіе і поширення атрибутів JSX, це стає можливим без танців з бубном:
class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (
<div className={className}>
<PostsGrid {...others} />
<button onClick={this.handleLoadMoreClick}>Load more</button>
</div>
);
}
}Так само ми можемо поєднувати JSX поширення атрибутів з регулярними атрибутами, користуючись простим правилом пріоритету для реалізації перевизначення значень і установки значень атрибута за замовчуванням. Цей елемент отримає перевизначення значення атрибута className, навіть якщо властивість className існує в this.props:
<div {...this.props} className="override">
…
</div>Атрибут className цього елемента за замовчуванням має значення «base», якщо не існує властивості className в this.props щоб перевизначити його:
<div className="base" {...this.props}>
…
</div>Переклад статті “React on ES6+“
Microsoft, Google, W3C, Samsung і Mozilla об’єдналися для створення єдиного порталу кросбраузерної документації. Метою даної ініціативи є спрощення роботи розробників.
Angular CLI являє собою інтерфейс командного рядка для створення Angular додатків, і протягом останнього року він став одним з найбільш важливих інструментів в арсеналі Angular розробника.
CLI несе відповідальність за автоматизацію вирішення багатьох проблем та головних болів, які стають розробниками в 2017 році. Починаючи з конфігурації, яка працює з коробки, випікання в найкращих практиках, які були відкриті спільнотою з часом, і допомагаючи вам створювати більше підтримуваний код, CLI виставляє деякі з найпотужніших можливостей Angular таким чином, що простіше для початку, і простіше швидко рухатися, коли порівнюєте все, що складається з собою.
Якщо ви не користуєтеся CLI сьогодні, це легко почати. Якщо ви встановили node та npm, ви можете запустити ці чотири команди, щоб швидко вставати та працювати з Angular та CLI.
npm install —g @angular/cli ng new my-angular-project cd my-angular-project ng serve
Angular CLI зробив значний прогрес протягом останніх декількох місяців, ви можете переглянути всеосяжні вказівки про цей прогрес на сторінці випуску , але це може бути корисним, якщо переглянути, що сталося за останні 4 місяці.
Мінімальний прапор дозволяє розробникам створювати менший простий проект за замовчуванням. Проекти, створені за допомогою цього прапорця, дещо відрізняються від набору за замовчуванням:
Коли ви використовуєте Lazy Loading with Angular, ми створимо набір файлів, які завантажуватиметься Angular Router тільки тоді, коли це буде потрібно для певного маршруту, який вимагає користувач.
При створенні виробничих робіт це, в кінцевому підсумку, називається цифровим і послідовним з процесу побудови.
0.46af283b5453c1d30d30.chunk.js 1.2b2a029972b8935a384a.chunk.js
Тепер із зазначеними розшаруваннями ми будемо використовувати назву модуля як підказку в рамках процесу побудови, щоб допомогти у налагодженні непробних збірок.
admin.module.chunk.js home.module.chunk.js
У Angular та багатьох сторонніх проектах часто є сотні окремих файлів з ліцензіями. Історично наш CLI допоміг розробникам залишатися сумісними, об’єднавши ці ліцензії як частину процесу комплектування.
Тепер, щоб максимально скоротити зв’язки, ми 3rdpartylicenses.txt вилучаємо ці ліцензії в окремий файл і видаляємо всі дублікати ліцензій.
З кожним випуском ми намагаємось покращити якість коду, який створює CLI з виробничими збірками. З цим випуском ми використовуємо найновіші можливості Webpack 3, включаючи можливості підняття обсягу.
Ми також включили бета-версію нового інструменту, над яким ми працюємо, щоб допомогти вам видалити код, на який ви не залежите, називається нашим оптимізатором збірки. Ви можете дати цей прапор спробувати з:
ng build --prod --build-optimizer
З нашої власної роботи на angular.io, ми побачили зменшення розміру 52% у виробництві нашої продукції.
Візуалізація на стороні сервера – це чудовий спосіб збільшити сприйнятну продуктивність вашої програми, а також зробити роботу програми кращою для сканерів, як Twitter або Facebook, які вискакують ваш веб-сайт, коли користувачі намагаються поділитися своїм вмістом.
Angular Universal був випущений з v4 Angular і включає в себе всі основні API, необхідні для відтворення вашої Angular програми на сервері. Універсальна підтримка в CLI полегшує це, дозволяючи вам створити другу програму CLI через .angular-cli.json конфігурацію, яка обертає вашу основну програму та дає вам можливість генерувати server пакет.
Angular робить основні випуски приблизно кожні 6 місяців. Оскільки все, що робить команда, – це Open Source, нові вузлові випуски, як правило, не мають багато функцій рано в процесі бета-версії, але вони можуть бути цікавими для випробувань, і команда сподівається отримати відгук від ранніх користувачів.
Спробувати та перевірити майбутні релізи Angular, сподіваюся, ви можете спробувати і повідомити нам, що ви думаєте. Версія 5.0.0 для Angular вимагатиме пізнішої версії CLI.
Одним із головних проектів команди CLI є створення схеми. Схематизація дозволяє запускати довільний код для виконання перетворень дерева як спосіб автоматичного написання коду та створення файлів. Ці можливості дозволяють створювати свої власні шаблони для ng new або ng generate специфічні для вашого стилю або компанії, побудувати на шаблонах ми пропонуємо для вас, або ви можете зробити більш складні речі, такі як генерація коду на підставі форми і відповідей віддаленого API.
Команда, що працює над CLI, має багато планів щодо полегшення життя розробників. Ось декілька ідей, котрі сподіваються (але не обіцяють) включити в майбутні випуски:
ng update - Angular робить патч, незначні та основні випуски на дуже регулярній основі. Інтерфейс ІР може мати повноваження, щоб допомогти вам у курсі. Команда Angular працює над інструментами для матеріалу та інтернаціоналізацією, щоб допомогти автоматизувати процес оновлення, піклуючись про внесення змін для вас, і CLI буде чудовим місцем для обробки цих інструментів.Переклад статті “The Past, Present, and Future of the Angular CLI“
З коробки Safari прекрасно відображає ваші існуючі веб-сайти по відтворенню від краю до краю нового iPhone X. Вміст автоматично вставляється в безпечну область екрана, щоб він не затуманився за округлими кутами або корпусом датчика пристрою.
Область вставки заповнюється сторінкою background-color(як вказано на елементах
або елементах), щоб поєднуватись з іншою частиною сторінки. Для багатьох сайтів це достатньо. Якщо ваша сторінка містить лише тексти та зображення, розміщені над твердим фоновим кольором, вставки за замовчуванням виглядають чудово.Інші сторінки, особливо ті, які розроблені з широкоширотними горизонтальними навігаційними панелями, такі як сторінка нижче, можуть додатково перейти далі, щоб повністю використовувати можливості нового дисплея. Правила iPhone X Human Interface містять деякі загальні принципи проектування, про які слід пам’ятати, і в документі UIKit обговорюються конкретні механізми, якими можуть користуватися оригінальні додатки, щоб гарантувати, що вони добре виглядають. На вашому веб-сайті можна скористатись кількома подібними новими частинами API WebKit, представленими в iOS 11, щоб максимально використовувати переваги меж-суті екрана.
Перша нова функція – це розширення існуючого viewport метатегу viewport-fit, що викликається , що забезпечує контроль над вставкою поведінки. viewport-fit доступний в iOS 11.
Значення за замовчуванням viewport-fit є auto, що призводить до автоматичного вставлення поведінки, наведене вище. Щоб вимкнути цю поведінку та примусити сторінку вирівняти повний розмір екрана, ви можете встановити viewport-fit її cover. Після цього наш viewport метатег виглядає так:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
Після перезавантаження панель навігації виглядає набагато краще, працює від краю до краю. Однак відразу зрозуміло, чому важливо поважати вставки в безпечному просторі системи: частина вмісту сторінки затуманена корпусом датчика пристрою, а нижня панель навігації дуже важко використовувати.
Наступний крок, спрямований на те, щоб знову зробити нашу сторінку доступною після прийняття, viewport-fit=cover полягає у вибірковому застосуванні елементів, які містять важливий вміст, для того, щоб вони не затушували форму екрана. Це призведе до появи сторінки, яка повною мірою сприяє збільшенню екранної нерухомості на iPhone X при динамічному настроюванні, щоб уникнути кутів, корпусу датчиків та індикатора доступу до головного екрана.
Для досягнення цієї мети в WebKit прошивки 11 включає в себе нову функцію CSS, constant() і набір з чотирьох попередньо визначених констант, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, і safe-area-inset-bottom. У сукупності вони дозволяють деклараціям стилів посилання на поточний розмір вбудованих безпечних зон з кожної сторони.
Робоча група CSS нещодавно вирішила додати цю функцію, але з іншою назвою. Будь ласка, майте на увазі під час прийняття.
constant() працює скрізь var() – наприклад, всередині paddingвластивостей:
.post {
padding: 12px;
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
}
Для веб-переглядачів, які не підтримуються constant(), правило стилю, яке включає його, буде проігноровано; з цієї причини важливо продовжувати окремо вказати резервні правила для будь-яких декларацій, що використовують constant().
min() і max()Цей розділ охоплює функції, які наразі не входять в iOS 11.
Якщо ви приймаєте константи вставки безпечного регіону у вашому дизайні веб-сайту, ви можете помітити, що дещо важко вказувати, що ви хочете мінімальне оздоблення на додаток до безпечної області вставки. На сторінці вище, де ми замінили нашу 12px лівою підкладкою з constant(safe-area-inset-left), коли ми повертаємо назад до портрета, ліва безпечна область вставки становить 0px, а текст сидить безпосередньо поруч із краєм екрана.
Щоб вирішити це, ми хочемо вказати, що наша прошивка повинна бути подушкою за замовчуванням або безпечною область вставки, залежно від того, що більше. Це може бути досягнуто з абсолютно новими функціями CSS min() і max() які будуть доступні в майбутніх версіях Safari Technology Preview. Обидві функції беруть довільну кількість аргументів і повертають мінімум або максимум. Вони можуть бути використані всередині calc(), або вкладені всередині один одного, і обидві функції дозволяють, calc() як-от математики всередині них.
Для цього ми хочемо використовувати max():
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, constant(safe-area-inset-left));
padding-right: max(12px, constant(safe-area-inset-right));
}
}
Важливо використовувати @supports з функцією виявлення хв і макс, так як вони не підтримуються у всьому світі, і завдяки CSS в обробці недійсних змінних, щоб НЕ вказати змінну всередині вашого запиту @supports.
На нашому прикладі сторінка, в портретній орієнтації, constant(safe-area-inset-left) вирішує до 0 пікселів, тому max() функція вирішує до 12 пікселів. У пейзажі, коли constant(safe-area-inset-left) більше завдяки корпусу сенсора, max() функція буде вирішена до такого розміру замість того, щоб завжди помітний важливий вміст.
Досвідчені веб-розробники могли б раніше зіткнутися з механізмом блокування “CSS”, який зазвичай використовується для скріплення властивостей CSS до певного діапазону значень. Використання min() та max() взаємодія робить це набагато простіше, і буде дуже корисним у впровадженні ефективних адаптивних дизайнерів у майбутньому.
Переклад статті “Designing Websites for iPhone X“
WordPress 4.8.2 тепер доступний. Це випуск безпеки для всіх попередніх версій, і ми настійно рекомендуємо негайно оновлювати свої сайти. На версію WordPress версії 4.8.1 і раніше виникають такі проблеми безпеки:
$wpdb->prepare() може створювати непередбачені та небезпечні запити, що приводять до потенційної ін’єкції SQL (SQLi). Ядро WordPress не є безпосередньо вразливим до цієї проблеми, але ми додали зміцнення, щоб запобігти випадковому виникненню вразливостей плагінами та темами. Про це повідомляє SlavcoДякую журналістам цих питань для здійснення відповідального розкриття інформації.
На додаток до вищезазначених питань безпеки, WordPress 4.8.2 містить 6 виправлень щодо обслуговування до версії 4.8. Щоб отримати додаткові відомості, див. Примітки до випуску або перегляньте список змін.
Завантажте WordPress 4.8.2 або перейдіть до Інформаційної панелі → Оновлення та просто натисніть кнопку «Оновити зараз».
Сайти, які підтримують автоматичні фонові оновлення, вже починають оновлюватися до WordPress 4.8.2.
Спасибі всім, хто внесли свій внесок у 4.8.2.
Переклад статті “WordPress 4.8.2 Security and Maintenance Release“
Відкрийте криптовалютну картку Trustee за кілька хвилин! Оплачуйте ваші покупки миттєво з автоматичною конвертацією