nizhampihe/lanie

Landing Page using ReactJS Single Page Application (Lanie Sinalia)

Lanie Sinalia

Landing Page using ReactJS Single Page Application (Lanie Sinalia)

Demo

Untuk preview live demo dapat diakses pada alamat link berikut https://nizhampihe.github.io/Lanie

Build

npm run build

Content

Home

• Landing Page berbasis SPA (jumbotron)
  • Sebuah Landing Page yang dibuat berbasis Single Page Application
  • lihat kode ->
• Apa itu SPA? (full width)
  • Single Page Application atau (SPA) adalah sebuah implementasi aplikasi berbasis web yang memuat satu halaman saja sebagai tampilan antarmuka. SPA hanya memuat satu dokumen web untuk memperbarui single document melalui JavaScript API ketika menampilkan konten berbeda. Dengan begitu, aplikasi dapat bekerja secara lebih cepat, ringan, dan memudahkan user.
• Berbagai fitur dan keunggulan yang dimiliki SPA (card row)
  • Sekali permintaan untuk memuat semua file (database)
  • Loading lebih cepat dan responsif (speed)
    • Dibandingkan multiple page web apps, proses loading Single Page Application jelas jauh lebih cepat. Pasalnya semua HTML terkait antarmuka sudah di-download sejak awal halaman dimuat. Server hanya mengambil sejumlah kode untuk membuat dan memperbarui user interface (UI). Semakin sedikit request ke server maka proses loading pun berlangsung singkat.
  • Meningkatkan user experience (person)
    • Kelebihan Single Page Application selanjutnya adalah meningkatkan pengalaman pengguna atau user experience (UX). Single page application hadir sebagai microservices architecture yang memungkinkan kamu leluasa bereksperimen terkait tampilan dan penggunaan aplikasi. Framework-nya sangat cocok untuk menciptakan UX yang menarik dan dinamis.
  • Tidak ada query tambahan (sync disabled)
    • Kelebihan Single Page Application lainnya yaitu tidak ada query tambahan yang berguna untuk menghemat energi dan waktu ketika memuat halaman. Hal ini menyebabkan SPA menurunkan dampaknya secara langsung kepada server. Dengan kata lain, developer dapat menekan biaya dengan memakai lebih sedikit server untuk jumlah trafik yang sama.
• implementasi SPA (carousel card row)
  • Todo List
    • fitur
      • crud list
      • export/import list
      • menggunakan local storage
  • Calculator
    • fitur
      • menyelesaikan persamaan
      • nilai pasti
      • riwayat kalkulasi
  • Stopwatch
    • fitur
      • ditampilkan di setiap halaman
      • lap
      • overlay
  • Password Generator
    • fitur
      • length
      • include
      • validator
• SPA menggunakan teknologi terbaru (item grid)
  • html5
  • css3
  • js es6
  • reactjs
  • webpack
  • babel
  • npm
  • nodejs
• Banyak perusahaan ternama yang telah menerapkan SPA (carousel, tab)
  • Gmail
  • Google Maps
  • Airbnb
  • Netflix
  • Pinterest
  • Paypal
• reference (list post)
  • dewaweb
  • glints
  • skillacademy
  • niagajoster
• Pertanyaan yang sering ditanyakan (FAQ) (list tab)
  • Mengapa harus menggunakan SPA?
  • apa perbedaan SPA dengan MPA?
  • apa kelebihan SPA?
  • apa kekurangan SPA?
  • kapan harus menggunakan SPA?
  • bagaimana cara menerapkan SPA?

Pages

• Home (home)
• Blog (feed)
  • Article
• Project (box)
  • Todo
  • Calc
• About (info)

Project

• Todo
• Calc
• stopwatch
• password generator
• Katarina (game)
• logistik (backend)
• cms (backend)
• forum (backend)
• job (backend)