preactCalculator
1.0.0
Saya membangun aplikasi ini sebagai bagian dari tantangan pengkodean untuk posisi pengembang frontend dengan startup di pusat kota Austin. Aplikasi ini adalah kalkulator sederhana menggunakan preact, css-grid, dan flexbox.
Awal yang cepat
konsep desain
Teknologi yang digunakan
Proses Menguji dan Membangun
Untuk menguji atau melihat aplikasi ini di mesin lokal Anda, klon repositori ini. Arahkan ke repositori Anda yang baru dikloning dan jalankan perintah berikut:
yarnAtau sebagai alternatif untuk pengguna NPM:
npm installKemudian jalankan:
yarn startAtau sebagai alternatif untuk pengguna NPM:
npm startArahkan ke http: // localhost: 8080/dan bersenang -senang!
Tidak ada spesifikasi desain yang disediakan untuk tantangan ini. Saya diberi pemerintahan gratis untuk merancang karena saya senang. Mengingat pekerjaan yang saya lamar, saya memilih untuk melayani produk saya ke klien. Dengan demikian, skema warna, palet, dan bahkan Favicon sengaja mirip dengan beranda mereka. (Idenya adalah bahwa klien telah menampilkan preferensi untuk skema desain ini karena mereka telah memilih desain yang sama persis untuk situs web produksi mereka. Ini juga menampilkan perhatian terhadap detail.)
Berikut adalah foto untuk perbandingan.
Situs web asli 
Aplikasi Kalkulator 
Saya menggunakan tantangan pengkodean ini sebagai kesempatan untuk bermain dengan kisi CSS asli yang baru (sesuatu yang telah saya lakukan untuk sementara waktu). CSS Grid luar biasa, tetapi ternyata hampir tidak mungkin untuk melewati properti area grid sebagai alat peraga.
Saya juga menggunakan Flexbox untuk memusatkan konten dan elemen. Saya penggemar berat Flexbox dan sangat memilihnya daripada solusi grid pihak ketiga lainnya atau menggunakan pelampung untuk penentuan posisi elemen.
Aplikasi ini juga mungkin pertama kali saya memiliki case penggunaan yang dapat dibenarkan untuk fitur Calc ()! Saya menggunakan calc () untuk mengatur tinggi halaman utama sama dengan 100VH dikurangi ketinggian bilah header dan offset bawah untuk memastikan elemen tidak tumpang tindih.
Sepanjang proses desain, saya berusaha untuk mematuhi beberapa prinsip desain UI dasar sebagaimana diuraikan di sini https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Aplikasi ini menggunakan:
CSS Native Grid
Flexbox
Preact
Preact-Router
Preact CLI
Moka
Chai
Eslint
Grid asli CSS cukup mengesankan, meskipun dukungan browser bisa kurang di browser yang lebih tua. Tampaknya sangat sulit untuk meneruskan gaya CSS sebagai alat peraga untuk komponen bersarang lainnya. Terutama ketika setiap komponen anak membutuhkan atribut posisi unik untuk bekerja dengan jaringan asli CSS. Mengevaluasi alat peraga tipe string ke dalam referensi untuk penataan gaya kelas CSS gagal. Bahkan saat menggunakan contoh langsung dari dokumentasi yang dipraktek. CSS-Grid tidak menerima string sebagai argumen area-kisi. Program saya tidak dapat membedakan antara referensi CSS VAR dan referensi JS.
Flexbox luar biasa dan memiliki dukungan browser yang lebih baik daripada CSS Native Grid. Tidak perlu lagi dikatakan tentang itu.
Preact adalah teknologi yang menarik. Saya suka itu ringan, saya juga suka fungsionalitasnya yang cepat dan itu sangat cocok untuk bereaksi tetapi dengan lisensi MIT. Saya merasa seperti beberapa alat build karena kurang jika dibandingkan dengan ekosistem React.
Router preact dalam aplikasi ini hanyalah pengaturan minimalis. Saya belum cukup mengatasinya untuk membicarakannya secara mendalam.
Pengaturan Preact Cli gagal di luar kotak karena kurangnya perintah uji dan pengaturan ESLINT yang tidak dikonfigurasi dengan buruk (atau kode yang ditulis oleh mereka yang melanggar aturan validasi mereka sendiri). Pengaturan pengujian masih kurang dan saya harus mengkonfigurasi sendiri (lebih lanjut tentang ini nanti). Untuk konfigurasi sistem build apa pun, penggunaan karma hanya tentang wajib dari apa yang saya kumpulkan. Perintah build mereka juga gagal.
Saya menggunakan mocha dan chai untuk pengaturan suite tes saya. Ini adalah waktu yang diuji klasik.
Eslint termasuk di luar kotak (gagal, akan dibahas secara lebih rinci nanti).
Semua logika aplikasi yang terkandung dalam komponen kalkulator. Semua yang lain adalah komponen murni/fungsional. Seandainya saya perlu membangun aplikasi yang lebih kompleks, MOBX atau Redux akan dilakukan.
Mobx atau Redux juga akan membantu pengujian fungsi. Saya awalnya berusaha untuk memisahkan logika dari komponen, tetapi sulit untuk mempertahankan konteks 'ini' sehubungan dengan logika yang memodifikasi status. Karenanya saya memilih untuk menulis logika di komponen secara langsung. Mengimpor metode yang memerlukan kesadaran negara dari file terpisah tanpa konteks negara yang tidak perlu memperumit hal -hal (bagaimanapun juga kita hanya memiliki beberapa metode dalam aplikasi ini).
Pada topik negara, JavaScript eval () tidak akan menerima operan non-string. Ini akan menangani bilangan bulat baik -baik saja, tetapi tidak mengutip operan dan dengan demikian membantu Anda Tuhan, aplikasi Anda akan hancur! Saya menangani semua data perhitungan-kritis di negara bagian sebagai string untuk memastikan bahwa ini tidak terjadi.
Pada catatan acak, aplikasi ini berjalan dari LocalHost Curly mencetak lebih tinggi pada evaluasi Lightbox di semua 4 kategori PWA, kinerja, aksesibilitas, dan praktik terbaik bila dibandingkan dengan situs web produksi klien saat ini.
Saya berusaha mempertahankan dependensi tambahan minimum selama pengembangan aplikasi.
Suite tes dapat dijalankan dengan yarn test atau npm test . Suite tes mengasumsikan pemasangan mocha global di mesin Anda.
Perpustakaan Preact itu sendiri memiliki masalah terbuka terkait dengan pengujian = preactjs/preact#658 Solusi mereka adalah menggunakan perpustakaan yang sedikit dikenal yang disebut https://github.com/develvelow/preact-jsx-chai/ Sayangnya perpustakaan itu sepertinya tidak bekerja untuk saya.
Konfigurasi pengujian adalah rasa sakit. Konfigurasi Babel disembunyikan oleh Preact-Cil. Tidak dapat mengakses konfigurasi. Mendapatkan "token tak terduga 'impor' bahkan ketika saya menempatkan file uji di dir yang sama dengan komponen itu sendiri." Tes harus menunggu. Dilakukan lagi, saya harus menerapkan alternatif lain untuk memungkinkan pengujian fungsi yang terpisah.
Pada topik pengujian, berikut adalah satu ton masalah yang terkait dengannya:
preactjs/preact-compat#233
Preactjs/Preact#146
https://gist.github.com/robertknight/88e9d10cff9269c55d453e5fb8364f47 (sayangnya, kurangnya konfigurasi webpack intuitif masih menyebabkan kegagalan dengan metode ini)
Preactjs/Preact#658 (Terbuka Masalah, Pengaturan Tes Preact yang sulit adalah masalah yang diketahui tanpa solusi saat ini.)
Preactjs/Preact#560 (menyentuh bagaimana preact didapat dan membutuhkan karma sebagai ketergantungan lain.)
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (inilah yang saya coba dulu. Tidak ada keberuntungan dengan yang itu juga.)
https://preactjs.com/guide/unit-testing-with-enzyme (dokumentasi mereka secara harfiah satu bagian. Dan tidak menawarkan alternatif untuk pengaturan karma yang tepat.)
Dan saat berbaris, Eslint gagal di luar kotak. Saya indentasi menggunakan 4 spasi. Plugin default Eslint Preact diatur ke tab yang menyebabkan kesalahan dilemparkan. Terlepas dari itu, pengaturan pengujian berjalan dan ada di tempat untuk plug-and-play pengaturan konfigurasi ESLINT. Saya akan dapat secara instan mengkonfigurasi ulang pengaturan ini agar sesuai dengan persyaratan khusus klien.
