ΠžΡ‚ UI-kit Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы

ΠžΠΏΡ‹Ρ‚ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠΈΠ½ΠΎΡ‚Π΅Π°Ρ‚Ρ€Π° Иви

Когда Π² Π½Π°Ρ‡Π°Π»Π΅ 2017 Π³ΠΎΠ΄Π° ΠΌΡ‹ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π·Π°Π΄ΡƒΠΌΠ°Π»ΠΈΡΡŒ ΠΎ создании собствСнной систСмы доставки Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΠΊΠΎΠ΄, ΠΎΠ± этом ΡƒΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΈ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ Π΄Π΅Π»Π°Π». Однако, ΠΎΠ± ΠΎΠΏΡ‹Ρ‚Π΅ построСния кроссплатформСнных Π΄ΠΈΠ·Π°ΠΉΠ½-систСм ΠΈ ΠΏΠΎ сСй дСнь ΠΌΠ°Π»ΠΎ Ρ‡Ρ‚ΠΎ извСстно, Π° понятных ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Ρ… Ρ€Π΅Ρ†Π΅ΠΏΡ‚ΠΎΠ², ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΡ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ способы ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ трансформации процСсса ΠΈΠΌΠΏΠ»Π΅ΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΡƒΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΊΠ°ΠΊ Π½Π΅ Π±Ρ‹Π»ΠΎ, Ρ‚Π°ΠΊ ΠΈ Π½Π΅Ρ‚. Π”Π° ΠΈ ΠΏΠΎΠ΄ Β«ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π² ΠΊΠΎΠ΄Π΅Β» часто ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ.

ΠžΡ‚ UI-kit Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы
МСТ Ρ‚Π΅ΠΌ компания Π³ΠΎΠ΄ ΠΎΡ‚ Π³ΠΎΠ΄Π° ΡƒΠ΄Π²Π°ΠΈΠ²Π°Π»Π° ΡˆΡ‚Π°Ρ‚ β€” Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π» Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ процСссы создания ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. Π£ΠΌΠ½ΠΎΠΆΠ°Π΅ΠΌ всё это Π½Π° Β«Π·ΠΎΠΎΠΏΠ°Ρ€ΠΊΒ» ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ, ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ вавилонского столпотворСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ просто Π½Π΅ способно Β«Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒΒ» ΠΈ ΠΏΡ€ΠΈΠ½ΠΎΡΠΈΡ‚ΡŒ Π΄ΠΎΡ…ΠΎΠ΄. Π Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ часто шло ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎ, ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» ΠΌΠΎΠ³ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ… с Π»Π°Π³ΠΎΠΌ Π² нСсколько мСсяцСв.

ΠžΡ‚ UI-kit Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы
ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π½Π°Π±ΠΎΡ€Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹

Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ, ΠΌΡ‹ Π½Π°Ρ‡Π°Π»ΠΈ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½-систСма ΠΈ сформулировали трСбования ΠΊ Π΅Ρ‘ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ. Помимо создания Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ языка, увСличСния скорости макСтирования ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ качСства ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Π² Ρ†Π΅Π»ΠΎΠΌ, Π±Ρ‹Π»ΠΎ ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ максимально ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½. Π­Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π° стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ сразу Π½Π° всСх Π½Π°ΡˆΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku β€” Π½Π΅ прорабатывая ΠΏΡ€ΠΈ этом ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠ· Π½ΠΈΡ… Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. И это Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ!

Π”ΠΈΠ·Π°ΠΉΠ½ β†’ Π΄Π°Π½Π½Ρ‹Π΅

Когда ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ договорённости ΠΎΡ‚Π΄Π΅Π»ΠΎΠ² ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π±Ρ‹Π»ΠΈ достигнуты, ΠΌΡ‹ сСли Π·Π° ΠΏΠΎΠ΄Π±ΠΎΡ€ тСхнологичСского стСка ΠΈ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ всСго процСсса β€” ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π΄ΠΎ Ρ€Π΅Π»ΠΈΠ·Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ процСсс ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ поисслСдовали Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с парсСром ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² прямо ΠΈΠ· Sketch-Ρ„Π°ΠΉΠ»ΠΎΠ² с ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ. Оказалось, Ρ‡Ρ‚ΠΎ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ куски ΠΊΠΎΠ΄Π° ΠΈ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ β€” затСя слоТная ΠΈ опасная. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ придётся Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€Π°ΠΉΠ½Π΅ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΌΠΈ Π² ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠΈ всСх слоёв исходника, Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для самых простых ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π° Π²-Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΡ…, Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΎΡ‚ Ρ‡ΡƒΠΆΠΎΠΉ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ структуры ΠΊΠΎΠ΄Π° исходного Sketch-ΠΌΠ°ΠΊΠ΅Ρ‚Π° ставит ΠΏΠΎΠ΄ ΡƒΠ³Ρ€ΠΎΠ·Ρƒ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅ всСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. ΠœΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π° этом участкС. Π’Π°ΠΊ Π² ΠΊΠΎΠΌΠ°Π½Π΄Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы появился ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, Π½Π° Π²Ρ…ΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΠΎΠ΄Π°ΡŽΡ‚ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, Π° Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ β€” Π΄Π°Π½Π½Ρ‹Π΅, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ иСрархичСски упорядочСнныС ΠΏΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π”Π΅Π»ΠΎ ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ Π·Π° ΠΌΠ°Π»Ρ‹ΠΌ: Π³Π΄Π΅ ΠΈ ΠΊΠ°ΠΊ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΈ ΠΊΠ°ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π½Π° всСх ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π½Π°ΠΌΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…. Π’Π΅Ρ‡Π΅Ρ€ пСрСставал Π±Ρ‹Ρ‚ΡŒ томным… Π˜Ρ‚ΠΎΠ³ΠΎΠΌ рСгулярных встрСч Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ Π³Ρ€ΡƒΠΏΠΏΡ‹, состоящСй ΠΈΠ· Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ‚ΠΈΠΌΠ»ΠΈΠ΄ΠΎΠ² ΠΎΡ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ стали договорённости ΠΎ Π½ΠΈΠΆΠ΅ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ.

Π’Ρ€ΡƒΡ‡Π½ΡƒΡŽ Ρ€Π°Π·Π±ΠΈΡ€Π°Π΅ΠΌ Π²ΠΈΠ·ΡƒΠ°Π» Π½Π° элСмСнты-Π°Ρ‚ΠΎΠΌΡ‹: ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Ρ†Π²Π΅Ρ‚Π°, прозрачности, отступы, скруглСния, ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ. И собираСм ΠΈΠ· этого ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΠ½ΠΏΡƒΡ‚Ρ‹, чСкбоксы, Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ банковских ΠΊΠ°Ρ€Ρ‚ ΠΈ Ρ‚. Π΄. Бтилям любого ΠΈΠ· ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ, ΠΊΡ€ΠΎΠΌΠ΅ ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌ присваиваСм нСсСмантичСскиС ΠΈΠΌΠ΅Π½Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ названия Π³ΠΎΡ€ΠΎΠ΄ΠΎΠ², ΠΈΠΌΠ΅Π½Π° Π½ΠΈΠΌΡ„, ΠΏΠΎΠΊΠ΅ΠΌΠΎΠ½ΠΎΠ², ΠΌΠ°Ρ€ΠΊΠΈ автомобилСй… Π’ΡƒΡ‚ условиС ΠΎΠ΄Π½ΠΎ β€” список Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΡ‡Π΅Ρ€ΠΏΠ°Ρ‚ΡŒΡΡ Ρ€Π°Π½ΡŒΡˆΠ΅, Ρ‡Π΅ΠΌ закончатся стили β€” ΡˆΠΎΡƒ маст Π³ΠΎΡƒ ΠΎΠ½! Π‘Π΅ΠΌΠ°Π½Ρ‚ΠΈΠΊΠΎΠΉ ΠΆΠ΅ Π½Π΅ стоит ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΡΡ€Π΅Π΄Π½ΡŽΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Β«smallΒ» ΠΈ Β«mediumΒ», Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ язык

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡƒΡˆΠ»ΠΈ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΠ»ΠΎ всСм ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌ, Π° Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ прСдстояло ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты интСрфСйса, способныС ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ эффСктивно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° всём ΠΏΠ°Ρ€ΠΊΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… устройств.

Π Π°Π½Π΅Π΅ ΠΌΡ‹ ΡƒΠΆΠ΅ успСли Β«ΠΎΠ±ΠΊΠ°Ρ‚Π°Ρ‚ΡŒΒ» Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠ΄ Windows 10, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π° Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚ являлось для нас Π½ΠΎΠ²ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠΎΠΉ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»Π°ΡΡŒ отрисовка ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° «с нуля». Рисуя Π΅Π³ΠΎ, ΠΌΡ‹ смогли ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Π»ΠΈ Π²ΠΎΠΉΡ‚ΠΈ Π² Π±ΡƒΠ΄ΡƒΡ‰ΡƒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½-систСму Иви. Π‘Π΅Π· Ρ‚Π°ΠΊΠΎΠΉ «пСсочницы» ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ большим числом ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π½Π° ΡƒΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…, Π° Π½Π° это ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ Π±Ρ‹ большС Π³ΠΎΠ΄Π°.

ΠŸΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ количСство ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ массив Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы Π² Ρ€Π°Π·Ρ‹, поэтому Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ прСдстояло Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄Π½Ρƒ Π·Π°Π΄Π°Ρ‡Ρƒ, Ρ€Π°Π½Π΅Π΅ Π½Π΅ ΠΎΠΏΠΈΡΠ°Π½Π½ΡƒΡŽ Π² ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°Ρ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ β€” ΠΊΠ°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΡƒ для Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ² ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ‚Π΅Π»Π΅Π²ΠΈΠ·ΠΎΡ€Π°Ρ…? И ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ Π±Ρ‹Ρ‚ΡŒ с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ элСмСнтов Π½Π° Ρ‚Π°ΠΊΠΈΡ… Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…?

ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½ΡƒΡŽ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку, которая Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ тСкста ΠΈ элСмСнтов для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹. Π—Π° Ρ‚ΠΎΡ‡ΠΊΡƒ отсчёта для сСтки ΠΌΡ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ количСство постСров Ρ„ΠΈΠ»ΡŒΠΌΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ экранС ΠΈ, исходя ΠΈΠ· этого сформулировали ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ построСния ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ сСтки, ΠΏΡ€ΠΈ условии β€” ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ постСра.

ΠžΡ‚ UI-kit Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы
Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ привСсти ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΌΠ°ΠΊΠ΅Ρ‚Π° всС большиС экраны ΠΈ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈΡ… Π² ΠΎΠ±Ρ‰ΡƒΡŽ сСтку. Apple TV ΠΈ Roku Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² Ρ€Π°Π·ΠΌΠ΅Ρ€ 1920×1080, Android TV β€” 960×540, Smart TV, Π² зависимости ΠΎΡ‚ Π²Π΅Π½Π΄ΠΎΡ€Π° Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΆΠ΅, Π° Π±Ρ‹Π²Π°ΡŽΡ‚ 1280×720. Когда ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ рСндСрится ΠΈ отобраТаСтся Π½Π° экранах Full HD, 960 умноТаСтся Π½Π° 2, 1280 Π½Π° 1,33, Π° 1920 выводится ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ.

ΠžΠΏΡƒΡΠΊΠ°Ρ скучныС подробности, ΠΌΡ‹ ΠΏΡ€ΠΈΡˆΠ»ΠΈ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ всС экраны, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ тСлСэкраны с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния элСмСнтов ΠΈ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΏΠΎΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, Π° всС тСлСэкраны ΡΠ²Π»ΡΡŽΡ‚ΡΡ частным случаСм ΠΎΠ±Ρ‰Π΅ΠΉ кроссплатформСнной сСтки, ΠΈ состоят ΠΈΠ· пяти ΠΈΠ»ΠΈ ΡˆΠ΅ΡΡ‚ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΊΠ°ΠΊ срСдний ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ ΠΈΠ»ΠΈ дСсктоп. ΠšΠΎΠΌΡƒ интСрСсны подробности, Π³ΠΎ Π² ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Ρ‹.

ΠžΡ‚ UI-kit Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы
Π•Π΄ΠΈΠ½Ρ‹ΠΉ UI для всСх ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ для отрисовки Π½ΠΎΠ²ΠΎΠΉ Ρ„ΠΈΡ‡ΠΈ Π½Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠ· ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ, плюс Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ адаптивности для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ…. Достаточно ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Π΅Π³ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ для всСх ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ ΠΈ устройств любой ΡˆΠΈΡ€ΠΈΠ½Ρ‹: Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ β€” 320–599, всё ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ β€” 600–1280.

Π”Π°Π½Π½Ρ‹Π΅ β†’ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΊΠ°ΠΊ Π±Ρ‹ Π½Π°ΠΌ Π½ΠΈ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ ΠΏΡ€ΠΈΠΉΡ‚ΠΈ ΠΊ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, каТдая ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° ΠΈΠΌΠ΅Π΅Ρ‚ свои ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ особСнности. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈ Π²Π΅Π±, ΠΈ Smart TV ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ стСк ReactJS + TypeScript, ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Smart TV запускаСтся Π½Π° ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… WebKit- ΠΈ Presto-ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°Ρ…, ΠΈ ΠΏΠΎΡ‚ΠΎΠΌΡƒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ стили с Π²Π΅Π±ΠΎΠΌ. А email-рассылки ΠΈ вовсС Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вёрсткой. ΠŸΡ€ΠΈ этом Π½ΠΈ ΠΎΠ΄Π½Π° ΠΈΠ· Π½Π΅-html-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΈ Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React Native ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ Π΅Ρ‘ Π°Π½Π°Π»ΠΎΠ³ΠΈ, опасаясь ΡƒΡ…ΡƒΠ΄ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρƒ нас слишком ΠΌΠ½ΠΎΠ³ΠΎ кастомных лэйаутов, ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΉ со слоТной Π»ΠΎΠ³ΠΈΠΊΠΎΠΉ обновлСния, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ для нас Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ распространённая схСма β€” ΠΏΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ CSS-стили ΠΈΠ»ΠΈ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ JSON, описывая значСния Π² абстрактном Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅.

Π’Π°ΠΊ свойство rounding: 8 ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Windows 10 ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π² CornerRadius="8", Π²Π΅Π± β€” border-radius: 8px, Android β€” android:radius="8dp", iOS β€” self.layer.cornerRadius = 8.0.
Cвойство offsetTop: 12 ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π²Π΅Π±-ΠΊΠ»ΠΈΠ΅Π½Ρ‚ Π² Ρ€Π°Π·Π½Ρ‹Ρ… случаях ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ top, margin-top, padding-top ΠΈΠ»ΠΈ transform

Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ описания Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° тСхничСски Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ свойство ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΌΡ‹ сдСлали Π½Π΅ΠΊΠΎΠ΅ ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ языка эспСранто: Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ взяли ΠΈΠ· Android, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ· SVG, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ· CSS.

Π’ случаС Ссли Π½Π° Ρ‚ΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ потрСбуСтся ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ элСмСнты ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΈΠ½Π°Ρ‡Π΅, ΠΌΡ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ JSON-Ρ„Π°ΠΉΠ»Π°. НапримСр, состояниС Β«Π² фокусС» для Smart TV, Π΄ΠΈΠΊΡ‚ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ тСкста ΠΏΠΎΠ΄ постСром, Π·Π½Π°Ρ‡ΠΈΡ‚ для этой ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Π΄Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ свойства «отступ» Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π΅ΠΉ 8 ΠΏΠΎΠΈΠ½Ρ‚ΠΎΠ² отступа. Π₯ΠΎΡ‚ΡŒ это ΠΈ услоТняСт инфраструктуру Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы, Π·Π°Ρ‚ΠΎ Π΄Π°Ρ‘Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ свободы, оставляя Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ самим ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Β«Π½Π΅ΠΏΠΎΡ…ΠΎΠΆΠ΅ΡΡ‚ΡŒΡŽΒ» ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ, Π° Π½Π΅ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π»ΠΎΠΆΠ½ΠΈΠΊΠ°ΠΌΠΈ Π½Π°ΠΌΠΈ ΠΆΠ΅ созданной Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹.

ΠžΡ‚ UI-kit Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы

ΠŸΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹

Π˜ΠΊΠΎΠ½ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° Π² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΌ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π΅ β€” это всСгда ΠΎΠ±ΡŠΡ‘ΠΌΠ½Ρ‹ΠΉ ΠΈ Π½Π΅ самый простой ΠΏΠΎΠ΄ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, часто ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π“Π»ΠΈΡ„ΠΎΠ² всСгда ΠΌΠ½ΠΎΠ³ΠΎ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌ ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, Π½Π΅ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠ²ΠΎΠ΄Π° Π½Π΅ завСсти всё это Π² Π΄ΠΈΠ·Π°ΠΉΠ½-систСму.

ΠžΡ‚ UI-kit Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы
Π“Π»ΠΈΡ„Ρ‹ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ SVG-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Π° значСния Ρ†Π²Π΅Ρ‚ΠΎΠ² автоматичСски Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ. ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ-ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΈΡ… ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ ΠΊ использованию β€” Π² любом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΠΈ Ρ†Π²Π΅Ρ‚Π΅.

ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€

ΠŸΠΎΠ²Π΅Ρ€Ρ… JSON’а с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΠΌΡ‹ написали инструмСнт для прСдпросмотра ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² β€” JS-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½Π° Π»Π΅Ρ‚Ρƒ ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‰Π΅Π΅ JSON-Π΄Π°Π½Π½Ρ‹Π΅ Ρ‡Π΅Ρ€Π΅Π· свои Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ стилСй, ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². По сути, прСдпросмотр являСтся Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹Π΅ прилоТСния, ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Ρ‚Π΅ΠΌΠΈ ΠΆΠ΅ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ.

ΠŸΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΏΡ€ΠΎΡ‰Π΅ всСго ΠΏΡƒΡ‚Ρ‘ΠΌ взаимодСйствия с Π½ΠΈΠΌ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Π½Π΅ стали ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнты, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Storybook, Π° сдСлали ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ прСдпросмотр β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‰ΡƒΠΏΠ°Ρ‚ΡŒ, ΠΏΠΎΠ½Π°Π²ΠΎΠ΄ΠΈΡ‚ΡŒ, ΠΏΠΎΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒβ€¦ ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½-систСму Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΎΠ½ появляСтся Π² прСдпросмотрС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌ Π±Ρ‹Π»ΠΎ Π½Π° Ρ‡Ρ‚ΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π΅Π³ΠΎ Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠΈ.

ДокумСнтация

На основС Ρ‚Π΅Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Π²ΠΈΠ΄Π΅ JSON ΠΏΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌ, автоматичСски формируСтся докумСнтация ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ. ΠžΠΏΠΈΡΡ‹Π²Π°Π΅Ρ‚ΡΡ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ свойств ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· Π½ΠΈΡ…. ПослС Π°Π²Ρ‚ΠΎΠ³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡ‚ΠΎΡ‡Π½ΠΈΡ‚ΡŒ Π² Ρ€ΡƒΡ‡Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкстовоС описаниС. ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΈ докумСнтация снабТСны пСрСкрёстными ссылками Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π° вся информация, ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‰Π°Ρ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, доступна Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π² Π²ΠΈΠ΄Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… JSON-Ρ„Π°ΠΉΠ»ΠΎΠ².

Π”Π΅ΠΏΡ€Π΅ΠΊΠ°Ρ‚ΠΎΡ€

Π•Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΎΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ стала Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π·Π°ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π”ΠΈΠ·Π°ΠΉΠ½-систСма Π½Π°ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ ΡΠΎΠΎΠ±Ρ‰Π°Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ свойства ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ρ†Π΅Π»Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСльзя ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΈΡ…, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ½ΠΈ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°ΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° всСх ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…. Пока Π² этом процСссС Π΅Ρ‰Ρ‘ ΠΌΠ½ΠΎΠ³ΠΎ Β«Ρ€ΡƒΡ‡Π½ΠΎΠ³ΠΎΒ» Ρ‚Ρ€ΡƒΠ΄Π°, Π½ΠΎ ΠΌΡ‹ Π½Π΅ стоим Π½Π° мСстС.

ΠšΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΠ°Ρ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

НСсомнСнно, самым ΠΌΠ°ΡΡˆΡ‚Π°Π±Π½Ρ‹ΠΌ ΠΏΠΎ слоТности этапом стала интСрпрСтация Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы Π² ΠΊΠΎΠ΄Π΅ всСх ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π½Π°ΠΌΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ. Если, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки Π½Π° Π²Π΅Π±Π΅ Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Π½ΠΎΠ²Ρ‹ΠΌ, Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ΄ iOS ΠΈ Android изрядно ΠΏΠΎΠΏΠΎΡ‚Π΅Π»ΠΈ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ, ΠΊΠ°ΠΊ с этим ΠΆΠΈΡ‚ΡŒ.

Для вСрстки экранов iOS-прилоТСния ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π΄Π²Π° Π±Π°Π·ΠΎΠ²Ρ‹Ρ… ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСдоставляСт iviUIKit: cвободная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° элСмСнтов ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΉ элСмСнтов. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ VIPER, ΠΈ всё взаимодСйствиС с iviUIKit сосрСдоточСно Π²ΠΎ View, Π° большая Ρ‡Π°ΡΡ‚ΡŒ взаимодСйствия с Apple UIKit сосрСдоточСна Π² iviUIKit. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ располоТСниС элСмСнтов задаётся Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ синтаксичСских конструкций, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎΠ²Π΅Ρ€Ρ… Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… констрСйнтов iOS SDK, Π΄Π΅Π»Π°ΡŽΡ‰ΠΈΡ… ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠΊΠ»Π°Π΄Π½Ρ‹ΠΌΠΈ. ОсобСнно это упростило Π½Π°ΠΌ Тизнь ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с UICollectionView. ΠœΡ‹ написали нСсколько настраиваСмых ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΎΠΊ для лэйаутов, Π² Ρ‚ΠΎΠΌ числС довольно слоТных. ΠšΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΈ ΠΎΠ½ стал Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ.

Для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ стилСй Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ Android ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Gradle, прСвращая Π΄Π°Π½Π½Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы Π² стили Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° XML. ΠŸΡ€ΠΈ этом Ρƒ нас Π΅ΡΡ‚ΡŒ нСсколько Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ уровня:

  • Π‘Π°Π·ΠΎΠ²Ρ‹Π΅. ΠŸΠ°Ρ€ΡΡΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²ΠΎΠ² для Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² Π±ΠΎΠ»Π΅Π΅ высокого уровня.
  • РСсурсныС. Π‘ΠΊΠ°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΈ ΠΏΡ€ΠΎΡ‡ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ.
  • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹Π΅. ΠŸΠΈΡˆΡƒΡ‚ΡΡ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Π³Π΄Π΅ описано ΠΊΠ°ΠΊΠΈΠ΅ свойства ΠΈ ΠΊΠ°ΠΊ пСрСвСсти Π² стили.

Π Π΅Π»ΠΈΠ·Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ нарисовали Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ, эти измСнСния ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ Π² Π΄ΠΈΠ·Π°ΠΉΠ½-систСму. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ Π΄ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ свою ΠΊΠΎΠ΄ΠΎΠ³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ, обСспСчивая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. ПослС этого Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½ΠΎΠ²ΠΎΠ³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π°, Π³Π΄Π΅ этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, взаимодСйствиС с Π΄ΠΈΠ·Π°ΠΉΠ½-систСмой происходит Π½Π΅ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ сборки Π½ΠΎΠ²Ρ‹Ρ… Ρ€Π΅Π»ΠΈΠ·ΠΎΠ². Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Ρ‚Π°ΠΊΠΆΠ΅ позволяСт Π»ΡƒΡ‡ΡˆΠ΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ процСсс ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚ΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… клиСнтской Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π˜Ρ‚ΠΎΠ³ΠΈ

Π‘ΠΊΠΎΡ€ΠΎ Π³ΠΎΠ΄ ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½-систСма стала Ρ‡Π°ΡΡ‚ΡŒΡŽ инфраструктуры, ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‰Π΅ΠΉ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠΈΠ½ΠΎΡ‚Π΅Π°Ρ‚Ρ€Π° Иви, ΠΈ ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΠ΅-ΠΊΠ°ΠΊΠΈΠ΅ Π²Ρ‹Π²ΠΎΠ΄Ρ‹:

  • Π­Ρ‚ΠΎ большой ΠΈ слоТный Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ постоянных Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… рСсурсов.
  • Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ кроссплатформСнный Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ язык, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠΉ Π·Π°Π΄Π°Ρ‡Π°ΠΌ сСрвиса ΠΎΠ½Π»Π°ΠΉΠ½ Π²ΠΈΠ΄Π΅ΠΎ.
  • Π£ нас большС Π½Π΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΎΡ‚ΡΡ‚Π°ΡŽΡ‰ΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ.

ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½-систСмы Иви β€” design.ivi.ru

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: habr.com