Frontend Live 2020: Format Baru - Peluang Baru

Tahun ini di Frontend Live kami kembali membahas topik yang paling relevan dalam pengembangan: akan ada 4 lagu tentang arsitektur, kinerja, pengujian, dan desain. Tapi kami juga akan membahas masalah terkait, karena frontend terus berkembang dan berkembang, solusi menarik untuk masalah lama (dan baru) muncul, dan, tentu saja, item baru untuk dipelajari.



Seperti biasa, selain laporan, juga akan ada intensif, kelas master dan lokakarya, dan, tentu saja, diskusi terbuka (siapa pun bisa melakukannya - usulkan topik untuk diskusi dan undang peserta).







Untuk memperluas wawasan Anda, kami sekali lagi hanya memilih laporan kreatif dan praktis tentang proyek kehidupan nyata. Akan ada laporan tentang ide-ide baru dan demonstrasi tentang bagaimana semuanya bekerja dan bekerja. Di kelas master, kami akan memberi tahu Anda bagaimana tim menyelesaikan kesulitan mendadak, pengetahuan baru apa yang mereka temukan dan apa yang mereka dapatkan sebagai hasilnya. Kami juga akan berbicara tentang kecantikan.



Dan indah dan aman



Di jalur pertanyaan umum, pembicara tidak takut untuk menggali lebih dalam tentang teknologi dan kembali dengan hasil yang menarik. Mereka akan memberi tahu Anda cara mencegah penetrasi dari luar pada tingkat kode, serta cara bekerja di runtime pengetikan statis TypeScript. Pembicara akan menambahkan sedikit hardcore, dan dari sisi pengembangan yang indah akan banyak hal menarik tentang sound, dance dan icon.



Alexander Inkin (Tinkoff.ru), seorang pengembang bersudut yang bersemangat, Pakar Pengembang Google, komposer, dan penggemar film, akan memamerkan aplikasinya untuk memainkan penyintesis di browser. Dalam demo yang luar biasa, Alexander akan menjelaskan bagaimana Anda dapat menggunakan API Audio Web imperatif dalam gaya deklaratif. Dia juga akan berbicara tentang apa yang akan membantu untuk dengan mudah menggunakan kembali blok yang dibuat, dan secara umum nyaman menggunakan API di lingkungan komponen web atau kerangka kerja dengan pendekatan komponen.



Vasilika Klimova (Avaloq) , seorang penginjil 3D dari Luksemburg dengan 11 tahun pengalaman dalam pengembangan web, suka menggunakan teknologi 3D di front-end bahkan sebelum teknologi itu menjadi mainstream. Saya adalah Pimpinan Tim Frontend di Artec3D, tempat saya mengenal dunia 3D WebGL.



Vasilika akan menunjukkan bagaimana dia mengajar model 3D-nya untuk menari, dan Anda akan mempelajari apa itu rigging, model skinning dan mengapa model tulang 3D.



Dalam industri kami, orang jarang menganggap barang-barang rumah tangga kecil seperti ikon svg. Nikita Mostovoy (HeadHunter) , pengembang frontend terkemuka dalam tim arsitektur, akan membenamkan kita dalam dunia mereka yang menakjubkan dan memberi tahu kita cara berbicara tentang cara mengoptimalkan penambahan ikon ke situs melalui komponen sebaris. Nikita juga akan menunjukkan kepada Anda bagaimana menyelesaikan masalah ikon non-caching selama SSR, bagaimana mengubah ikon dan mengoptimalkan proses pemuatannya.



Jika Anda ingin open source dan menghemat beberapa minggu untuk pelatihan, maka Roman Sedov dari Tinkoff.ru, Pengembang bersudut dan penulis buku interaktif tentang sudut lanjut), akan memberi tahu Anda apa yang perlu Anda lakukan dan ketahui. Roman mendukung dan mengembangkan proyek open source di dunia Angular dan mengetahui dalam praktik betapa menyenangkannya membuat perpustakaan NPM. Dan juga bagaimana menulis dokumentasi, bagaimana sebuah paket terlihat tanpa kode yang tidak perlu, bagaimana tidak memberikan kesan bahan mentah daripada sumber, bagaimana mengatur verifikasi kode dan bagaimana mengunggahnya.



Setelah mengupload kode tersebut, Anda perlu bersiap bahwa peretas juga akan memahaminya. Tatiana Novikova (TSARKA) , seorang pentester berpengalaman dan auditor kode sumber dari sudut pandang keamanan, akan menunjukkan vektor serangan apa yang ada dan bagaimana peretas mengeksploitasi kerentanan frontend. Ini juga akan menjelaskan mengapa kerangka kerja web tidak melindungi pengembang dari kesalahan keamanan dan bagaimana menangani semuanya.



Tatiana akan melakukan tur dunia kerentanan front-end, dimulai dengan XSS dan diakhiri dengan bukan jenis serangan yang paling populer, sehingga Anda dapat dengan yakin mengatakan bahwa Anda memiliki minimum higienis.



Dan tentu saja, di mana tanpa hardcore. Teknologi front-end terus berkembang, dan kami tidak selalu mengikuti perkembangan ini. Alexander Rudenko (X5Labs) , Insinyur Perangkat Lunak Senior / Pimpinan Komunitas di Lingkaran Pengembang Facebook: Moskow, akan melanjutkannya dari konferensi terakhir. Tahun lalu Alexander memperkenalkan kami pada Relay Modern , dan tahun ini dia akan memberi tahu Anda cara bekerja dengan Lapisan Jaringan & Data di dalamnya.



Alexander akan mengingatkan Anda tentang prinsip-prinsip dasar Relay Modern, dan kemudian menyelami lapisan data dan lapisan jaringan untuk membicarakan tentang koneksi yang kompeten ke sisi server.



Mike Bashurov (WiseBits) , pembicara biasa, samurai TypeScript dan penggemar ReasonML, akan memberi tahu Anda cara menyeret pengetikan statis di TS ke runtime. Untuk apa? Misalnya, untuk memvalidasi JSON, data lain, atau untuk pengujian berbasis properti. Memang tidak mudah, tetapi jika Anda benar-benar ingin, maka Anda bisa!



Mike akan menunjukkan kepada Anda apa itu tipe-diarahkan emit, bagaimana menggunakannya, membandingkannya dengan solusi lain, dan menyelami API transpiler (dan kita akan melihat jebakan dari pendekatan ini. Ayo lihat bagaimana jenis pindah ke runtime dan memvalidasi data) ...



Indah tidak hanya di luar, tetapi juga di dalam



Pengembang juga ingin bekerja dengan kode yang indah dan nyaman. Tentu saja, sulit untuk menilai apakah arsitekturnya bagus atau tidak - dalam satu proyek akan berhasil, dan di proyek lain "ada yang tidak beres". Namun demikian, arsitektur yang jelas selalu membantu pengerjaan proyek: memperluas atau mengubah kode terjadi tanpa kesulitan besar dalam memahami dan mengujinya. Meskipun Anda baru saja menerima kode orang lain di tangan Anda. Laporan jalur "Arsitektur" hanyalah tentang cara membuat hidup lebih mudah bagi pengembang.



Denis Krasnovsky (DomClik) , manajer pengembangan teknis, akan kembali dengan laporan optimasi kode. Kali ini Denis akan berbicara tentang metodologi refactoring yang diasah pada banyak proyek. Dengan bantuannya, Anda dapat menghembuskan kehidupan baru ke dalam kode yang paling tidak bisa dipahami.



Dengan algoritme baru, akan lebih mudah membuat keputusan untuk menangani masalah ketika Anda sudah sampai pada sebuah proyek dengan warisan.



Ivan Soloviev (Evrone) , tidak hanya developer JS frontend, tetapi juga praktisi Go dan Rust - dia suka membandingkan mereka satu sama lain dan dengan JavaScript. Ivan akan berbicara tentang bagaimana pilihan antara monolit dan layanan mikro, serta mono-repositori dan polyrep, memengaruhi perjuangan melawan kompleksitas dalam proyek-proyek besar.



Ivan juga akan membagikan bagaimana arsitektur yang dipilih akan membantu mencegah penyakit dari frontend yang besar seperti siklus rilis, vendor dalam pertumbuhan, keusangan kode, penilaian ketergantungan, duplikasi kode, dan kode bersama.



Ali Rahimov (Okko), pengembang frontend sejak 2013, akan berbicara tentang manfaat TypeScript dalam arsitektur pengembangan web dan mengapa pengembang semakin memilih TypeScript untuk proyek mereka. Dan juga tentang pro dan kontra penggunaan bahasa dan betapa mudahnya memulai situs web pertama Anda di TypeScript.



Sebuah blok terpisah akan dikhususkan untuk pengetikan, landasan bahasa yang bahkan tersandung oleh pengembang berpengalaman.



Andrey Marchenko (Tinkoff.ru) , techlead, platform pengembang untuk pengembang, akan menceritakan kisah proyeknya. Cari tahu bagaimana arsitektur front-end telah berubah dan berkembang di Tinkoff. Bagaimana pada tahun 2015 5 pengembang membuat situs tinkoff.ru di React 0.13 dan bagaimana proyek tersebut berjalan sekarang.



Sekarang sudah ada 60 pengembang, dan monolit terdiri dari 40 aplikasi terpisah, mikrofront, monorep, dan produk teknis.



Vladimir Grinenko (Yandex) , Kepala Layanan Komponen Bersama di Departemen Pengembangan Antarmuka Pencarian, akan menunjukkan kepada Anda cara menemukan keseimbangan yang sempurna agar tidak mendorong semua orang ke dalam satu sistem desain dan pada saat yang sama mempertahankan identifikasi diri visual. Karena Yandex membuat produk yang sangat berbeda (pencarian, taksi, musik, makanan, pendidikan, dan bioskop), konsistensi (konsistensi) antarmuka di Yandex adalah fenomena yang kontradiktif baik dari sudut pandang visual maupun teknologi.



Vladimir akan menunjukkan rumus manfaat dari kode umum: di mana ia akan bekerja, dan di mana lebih baik untuk menulis sepeda Anda sendiri, dan akan memberi tahu Anda cara menggunakan kembali kode tersebut tanpa techno-fasisme dan menghentikan eksperimen.



Bagus dan hasilnya



Tidak ada yang mau membuang waktu untuk menguji dengan hasil yang tidak dapat dipahami atau mengarungi kondisi pengujian yang sulit, bahkan jika hasilnya bagus. Agar hasilnya sesuai dengan harapan Anda, pembicara kami akan memberi tahu Anda cara membuat pengujian dapat dipahami bahkan untuk penguji dan manajer, bagaimana pengujian tersebut dilihat dari perspektif mantan QA yang beralih ke pengembangan. Dan dalam "Pengujian", selain laporan, akan ada pengujian sendiri, khususnya nodejs-web-services dan UI.



Alexander Iossa (Diginavis) , manajer produk, pembawa acara saluran tentang rasa sakit dan kegembiraan insinyur perangkat lunak, akan berbicara tentang pengujian BDD aplikasi web dan bagaimana itu membantu menulis tes E2E lebih murah dan lebih cepat. Menunjukkan bagaimana sintaks Gherkin dalam hubungannya dengan Cypress membuat pengujian dapat dimengerti tidak hanya untuk pengembang, tetapi juga untuk penguji dan manajer.



Alexander akan mengajarkan cara menulis tes, serta siapa dan kapan harus dan dapat menulisnya. Anda akan dapat menentukan tempat tes penerimaan di pipeline ci / cd, menggunakan kembali blok yang ditulis sebelumnya, dan setelah semua ini, mudah untuk memelihara dan memperluas proses pengujian.



Alexander juga tahu apa yang harus memancing di Innopolis, tempat tinggalnya selama lebih dari 4 tahun. Jangan lewatkan kesempatan untuk menanyakannya)



Nikolay Moskalenko (Raiffeisenbank) , penguji dengan 10 tahun pengalaman, pengembang frontend di React dan animator, akan menanyakan pertanyaan canggung tentang kualitas pengujian. Kami akan melihat situasi dengan tes melalui mata mantan QA yang pindah ke pengembangan. Dan mari kita cari tahu cara menguji kode dengan cepat (ada lebih banyak cacat daripada yang terlihat!).



Nikolay juga akan memberi tahu Anda tes mana yang lebih baik untuk dipilih untuk menghemat waktu. Anda akan memahami teknik dan alat apa yang menghilangkan ketergantungan eksternal saat menguji aplikasi frontend. Tapi itu belum semuanya! Nikolay akan memberi tahu Anda cara mempercepat penulisan autotest di JavaScript dan meningkatkan keterbacaannya menggunakan notasi Gherking, pustaka lelucon.

Untuk hidangan penutup, ada pola PageObject untuk pengujian ujung ke ujung pada Puppeteer, yang menyederhanakan dukungan untuk pengujian otomatis UI.



Dan terakhir, sebanyak 2 kelas master pada pengujian akan dilakukan oleh Maxim Sosnov (SKB Kontur)., pengembang utama, mesin budaya keunggulan teknis yang berusaha untuk gesit dan sesuai dengan filosofi DevOps. Maxim akan memberi tahu Anda apa pola dan anti-pola itu, bagaimana membuat tes yang berguna, dan bagaimana menjual tes ke tim sehingga pengembang tidak muncul hidung mereka.



Kelas master 1. Pengujian layanan nodejs-web



Pada kelas master pertama, Maxim akan menunjukkan cara menguji layanan nodejs dengan benar. Cara menggunakan mocha, chai, nock, supertest, praktik pengujian terbaik, dan akal sehat untuk mendapatkan pengujian fungsional yang andal. Mari kita lihat bagaimana tes semacam itu membantu dalam refactoring.



Kelas master 2. Pengujian UI



Bersama dengan Maxim, kami akan menyesuaikan praktik pengujian terbaik untuk tata letak dan mencari tahu kombinasi pengujian mana yang ideal untuk pengujian UI. Ini akan mencakup praktik seperti pengujian tangkapan layar dan pengujian fungsional dan cara mudah memasukkannya ke dalam proses pengembangan Anda. Alat bekas:



  • buku cerita
  • loki.js
  • pustaka pengujian
  • bersenda gurau


Bagus dan cepat



Apa yang terjadi pada pengguna saat dia membuka aplikasi? Apakah dia menunggu 2 menit setelah setiap klik atau dengan senang hati membenamkan dirinya dalam pekerjaan?



Saat ini kinerja tidak lagi ditingkatkan secara retroaktif, tetapi melalui perkembangan. Pengembang segera memeriksa bagaimana keputusan arsitektural memengaruhi kecepatan memuat, rendering, interaktivitas, dll. Ini membutuhkan pemantauan yang konstan. Pengujian dan pengukuran membutuhkan metrik yang bergantung pada sejumlah besar parameter. Misalnya, di perangkat apa, di browser apa, di jaringan apa, dan dengan firewall apa pengguna membuka aplikasi? Belum lagi server pementasan, cache, proxy, dan detail lainnya. Dan bahkan setelah semua upaya ini, akselerasi tetap menjadi masalah dan memusingkan pengembang.



Terlepas dari semua kesulitan ini,Nikolay Ryabov (Avito) , menangani segala hal yang berkaitan dengan kinerja frontend di dalam Avito - kumpulan metrik, pembuatan profil, pengoptimalan. Nikolay yakin bahwa tugas bisnis adalah membuat fitur secara efisien.



Pada konferensi tersebut, Nikolai akan mengusulkan untuk menggabungkan kemampuan Lighthouse, webpack-bundle-analyzer, dan Chrome DevTools Performance dalam satu alat. Cari tahu mengapa kumpulan alat ini saja tidak akan membantu Anda memantau kinerja secara berkelanjutan.



Victor Rusakovich (Solusi GP), pengembang frontend yang telah melihat banyak kerangka kerja dan pustaka, bekerja dengan jQuery, Backbone, Knockout, Angular, Elm, Clojure dan RxJS dan terakhir React. Victor akan berbicara secara rinci tentang metrik dan alat untuk mengumpulkan statistik tentang kinerja situs klien, kesimpulan apa yang dapat diambil, bagaimana statistik tidak hanya mengumpulkan data, tetapi juga meningkatkan kecepatan situs.



Pendengar laporan akan menerima jawaban atas pertanyaan:



  • Apa dan bagaimana kami mengumpulkannya?
  • Bagaimana dan mengapa kami menganalisis?
  • Mengapa mengumpulkan statistik dari pengguna?
  • Bagaimana Anda tahu seberapa cepat situs Anda memuat dan berkinerja?
  • Mengapa repot-repot dengan kecepatan situs web?


Vitaly Sysolyatin (Delivery Club) , techlead, JavaScript dan pengembang frontend, akan memberi tahu Anda cara membuat SSR secepat mungkin dan masalah apa yang harus Anda selesaikan. Contohnya adalah situs baru delivery-club.ru, yang diluncurkan sebagai Aplikasi Halaman Tunggal dengan implementasi Server Side Rendering.



Vitaly akan memberi tahu Anda jenis penggaruk apa yang mereka alami, dan apa yang akan menjadi masalah bagi pengembang frontend dalam javascript di lingkungan server. Bersama dengan Vitaly, kita akan belajar bagaimana melewati kelemahan JavaScript untuk efisiensi aplikasi. Kisah kehidupan nyata juga akan ada di sana!



Alexander Baltsevich (Synesis), seorang pemimpin dan blogger yang dipimpin ilmuwan yang mempraktikkan eksperimen pendidikan. Di Frontend Live, Alexander akan menjelaskan bagaimana React menghasilkan 60 fps bahkan dengan aliran pembaruan yang besar setiap detik. Mari kita cari tahu bagaimana React mencapai kecepatan perbandingan O (n) dengan algoritma paling canggih dengan perbandingan pohon dari urutan O (n ^ 3).



Dan tentu saja, kita akan melihat contoh pertarungan bagaimana Anda bisa menembak diri sendiri dengan akselerasi seperti itu!



Kotak yang indah



Otak pengembang dan pengguna beroperasi pada gelombang yang berbeda. Yang pertama akan menemukan fiturnya yang brilian, sedangkan yang kedua hanya akan bingung ketika mencoba mengganti jumlah item di keranjang. Dan apa yang diinginkan pengguna tampaknya sangat sederhana bagi seorang jenius. Namun pengembang juga menggunakan aplikasi dan mengalami hal yang sama ketika desain, antarmuka, atau bahkan warna mencegah mereka mendapatkan apa yang mereka pesan. Pada track desain akan ada laporan warna dan interface untuk pengguna.



Glafira Zhur (SpurIT), seorang pemimpin tim dan pengembang aksesibilitas, bersemangat tentang antarmuka dan aksesibilitasnya sejak usia muda. Di Frontend Live, dia akan berbicara tentang dampak psikologis warna, yang tidak bergantung pada mode, tren, dan keinginan pelanggan. Ini akan mengungkapkan bagaimana warna pada antarmuka memengaruhi persepsi informasi, dan bagaimana pengembang dapat menggunakannya untuk mengontrol suasana hati, pilihan, dan pengalaman pelanggan.



Kami juga akan belajar tentang aksesibilitas antarmuka dalam hal solusi warna.



Anna Selezneva (Spiral Scout) , pengembang frontend kreatif, pembicara di konferensi dan pertemuan, penyelenggara pertemuan MinskCSS dan MinskJS, dan konferensi CSSMinskJS. Anna akan mengingatkan Anda bahwa kami sedang mengembangkan antarmuka pengguna -. Mari pelajari cara mengingat gagasan bahwa orang sungguhan akan menggunakannya saat mengimplementasikan antarmuka.



Menurut Anna, "10 tahun yang lalu, masalah kami adalah browser yang saling bertabrakan, dan sekarang kami perlu membuat situsnya responsif, dapat diakses, dan efisien".



Terakhir, Vitaly Fridman (Smashing Magazine) , salah satu pendiri majalah online, penulis buku dan konsultan UX / frontend berpikiran terbuka, akan berbicara tentang dampak kenyamanan layanan pada konversi dan indikator bisnis utama . Pembicaraan Vitaly adalah tentang pengembangan formulir web untuk pengguna akhir, yang sering kali menentukan kenyamanan seluruh layanan secara tepat oleh mereka.

Formulir web sering kali tidak dapat diakses dan sulit digunakan, dan Vitaliy akan menjelaskan poin nyeri khas yang terlalu sering dihadapi klien. Terakhir, kita akan belajar cara membuat antarmuka yang memungkinkan kita menerima informasi dari klien dengan cara yang bersahabat, sehingga membantu konversi dan meningkatkan indikator bisnis utama.



Lihat daftar lengkap laporan di situs web konferensi . Di versi seluler situs, Anda dapat menambahkan laporan yang Anda suka ke jadwal Anda. Jangan lupa untuk memesan tiket Anda (harga akan naik pada 15 September).



Frontend Live 2020akan diadakan pada 23 September 2020 - 2 Oktober 2020 secara online di seluruh dunia. Kami telah membuat format baru untuk itu, yang seefektif rapat offline. Anda dapat merasakan energi komunitas, menyegarkannya kembali, membangun jaringan dengan rekan-rekan industri, dan mendapatkan nasihat ahli. Anda bahkan dapat mengadakan pesta pora online dengan sepeda hingga pagi hari untuk hidup dan karier Anda. Semuanya seperti dalam hidup :)



Jadwal setiap hari telah dibuat, tetapi perubahan kecil mungkin saja terjadi. Dan kami akan menulis tentang acara-chip konferensi di telegram , facebook , twitter , dan VKontakte .



All Articles