Pemaju dan pereka bekerja pada satu sumber kebenaran dengan uxpin

Konflik antara reka bentuk web dan alat pembangunan selalu menjadi masalah lama dalam industri. Hasil akhir dari reka bentuk web biasanya merupakan model, di mana pemaju digunakan untuk membuat laman web dan pereka membuat laman web "dicat kerja", dan putus ini mencipta geseran besar. Yang manakah sumber kebenaran?

Bagaimana jika ada satu pun sumber fakta? Bagaimana jika alat reka bentuk menggunakan kod yang sama seperti laman web pengeluaran? Bab terbaru perbincangan yang berlarutan ini adalah UXPIN.

Mari kita dapatkan beberapa fakta terlebih dahulu supaya kita dapat memahami semua ini dengan lebih baik.

UXPIN: Alat reka bentuk dalam pelayar berasaskan kod

UXPIN adalah alat reka bentuk yang kuat dengan semua ciri yang anda harapkan, memberi tumpuan terutama pada reka bentuk berasaskan skrin digital dan prototaip lanjutan.

Hakikat bahawa ia berdasarkan kod sangat penting. Gunakan semua komponen visual (yang sebenarnya berakar dalam kod) untuk mereka bentuk laman web, membawa reka bentuk lebih dekat ke produk akhir. Reka bentuk anda bukan sahaja kelihatan seperti laman web atau aplikasi, tetapi juga ciri -ciri seperti laman web atau aplikasi. Sebagai contoh, bukannya kotak statik dengan garis besar, medan input memberi anda perasaan sebenar mengisi dengan teks.

Reka bentuk berasaskan kod telah menyediakan semua spesifikasi untuk setiap elemen-seperti komponen kad ini; Warna tepat (menggunakan format yang betul), dan saiz piksel yang tepat, dan banyak lagi. Dalam sesetengah kes, adalah mungkin untuk mengekstrak kod komponen UI yang tepat untuk pemaju untuk digunakan.

Ania Kubów menjelaskan perkara ini dengan baik dalam video mengenai UXPIN.

Lebih sedekad yang lalu, Jason Santa Maria berfikir dengan serius tentang apa yang kelihatan seperti generasi reka bentuk. Bolehkah kita menggunakan penyemak imbas secara langsung?

Saya tidak fikir penyemak imbas sudah cukup. Pereka web melompat ke penyemak imbas sebelum menyelesaikan masalah pemindahan kreatif dan maklumat, seperti arkitek mengetuk kayu bersama -sama dan kemudian mengukurnya. Alat mengehadkan imaginasi, dan imaginasi atau inspirasi pada permulaan reka bentuk meletakkan asas untuk semua yang berikut.

Jason Santa Maria , "Aplikasi Reka Bentuk Web Sebenar"

Mungkin tidak menggunakan penyemak imbas secara langsung, tetapi alat berasaskan kod boleh menjadikan UI berfungsi seperti laman web atau aplikasi anda, yang boleh menjadi yang terbaik dari kedua-dua dunia:

Halaman web adalah ruang yang dinamik dan hidup, dan interaksi minimum pelawat dapat mengubah skop seluruh laman web. [...] Kerana kita tidak berurusan dengan media statik, kita perlu dapat merancang perubahan interaksi dan laman web [...] aplikasi perlu melihat unsur -unsur, bukan warna atau blok teks. Photoshop, ilustrator, dan bunga api mempunyai beberapa ciri peringkat rendah dalam hal ini, tetapi keperluan untuk pemprosesan yang lebih dinamik dan tidak merosakkan adalah jelas.

Anda boleh menggunakan komponen reaksi anda sendiri di uxpin

Ini adalah keajaiban sumber fakta tunggal . Jika alat reka bentuk boleh mengeluarkan reaksi (atau mana -mana rangka kerja lain) komponen, itu satu perkara. Ini adalah helah pintar. Tetapi ia mungkin menjadi perjalanan sehala. Komponen dalam projek dunia nyata dipenuhi dengan kandungan lain yang tidak sepenuhnya dalam bidang reka bentuk. Mungkin komponen menggunakan cangkuk untuk mengembalikan kebenaran pengguna semasa, dan jika mereka tidak mempunyai akses, butang dilumpuhkan. Butang kurang upaya mempunyai elemen reka bentuk tertentu, tetapi bukan kes bagi kebanyakan kod.

Jika alat reka bentuk tidak dapat menghormati kod lain dalam komponen itu dan pada dasarnya hanya mengabaikannya, ia tidak praktikal. Pada asasnya, jika alat reka bentuk mengeksport komponen sebagai kod, tetapi tidak membenarkan pereka untuk mengimport komponen UI terlebih dahulu, ia tidak begitu berguna.

Di sinilah gabungan uxpin masuk.

Sekarang, untuk menjadi adil, ini memerlukan beberapa kerja untuk ditubuhkan. Ia hanya boleh mengambil masa beberapa jam atau minggu untuk menyelesaikan reka bentuk sistem yang lengkap. Pada masa ini, UXPIN hanya berfungsi dengan React dan menggunakan konfigurasi Webpack untuk mengintegrasikannya.

Sebaik sahaja anda mula berjalan, komponen yang anda gunakan di UXPIN benar -benar komponen yang anda gunakan untuk membina laman web pengeluaran anda.

Ia sangat mengagumkan untuk melihat alat reka bentuk mencerna komponen pra-bina dan membolehkan mereka digunakan untuk prototaip pada kanvas baru.

UXPIN membantu anda melaksanakan ciri ini dalam projek anda, termasuk:

• Dokumentasi yang mengintegrasikan komponen anda sendiri
• Repositori Contoh: Uxpin-mere-boilerplate

Seperti yang dijangkakan, ia boleh menjejaskan cara anda membina komponen

Komponen sering mempunyai aspek seperti atribut, reka bentuk kawalan atribut dan kandungan dalaman. UXPIN menyediakan anda dengan UI sifat, yang bermaksud anda mempunyai kawalan sepenuhnya ke atas komponen.

 <code><linechart ...="" barcolor="green" data="{[" height="200" showxaxis="false" showyaxis="true" width="500"></linechart></code>

Mengetahui ini, anda boleh menyediakan antara muka harta untuk komponen, menyediakan banyak kawalan reka bentuk. Sebagai contoh, suis tema bersepadu.

Lebih cepat dengan buku cerita

Satu lagi alat yang sangat popular di medan komponen JavaScript untuk ujian dan komponen bangunan adalah buku cerita. Ia bukan alat reka bentuk seperti UXPIN - ia lebih seperti "zoo" komponen. Anda mungkin telah menetapkannya, atau anda mungkin merasa berharga untuk menggunakan buku cerita.

Apa berita baiknya? UXPIN Gabungan berfungsi dengan sempurna dengan buku cerita. Ia menjadikan integrasi sangat cepat dan mudah. Di samping itu, ia menyokong rangka kerja seperti sudut, svelte, vue, dan lain -lain - selain bertindak balas.

Lihat seberapa cepatnya:

Ketua Pegawai Eksekutif Uxpin Marcin Treder mempunyai visi yang kuat:

Bagaimana jika pereka boleh menggunakan komponen yang sama yang digunakan oleh jurutera, dan semuanya disimpan dalam sistem reka bentuk bersama (dengan dokumentasi dan ujian yang tepat)? Ramai yang mengecewakan dan salah faham antara pereka dan jurutera tidak akan lagi wujud.

Dan rancangan:

1. Sambung ke repositori repositori atau buku cerita Git.
2. Komponen import dari sana ke alat reka bentuk UXPIN.
3. Semua perubahan dalam repositori akan diselaraskan secara automatik dalam UXPIN. Pantau sebarang perubahan pada repositori dan segerakkannya dalam editor visual.
4. Biarkan pereka merancang dan menyampaikan spesifikasi yang tepat dan reka bentuk berfungsi sepenuhnya kepada pemaju.

Itulah yang mereka lakukan di sini.

Mengalami penggabungan uxpin

Atas ialah kandungan terperinci Pemaju dan pereka bekerja pada satu sumber kebenaran dengan uxpin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!