การแบ่งปันรหัส angularJS ข้ามแอพไฮบริดไอออนิกและเว็บไซต์มือถือทั่วไป


11

ตกลงดังนั้นใน 'ห้องแล็บนวัตกรรม' ของเราในปัจจุบันมีการผลักดันให้ใช้ Ionic ซึ่งเป็นเฟรมเวิร์กแอพไฮบริดที่สร้างขึ้นบน Cordova สำหรับการเข้าถึงดั้งเดิมและ angularJS สำหรับ 'รหัสเว็บ'

นอกจากนี้ยังมีบางโปรเจ็กต์ที่เป็นเว็บบนมือถือแท้โดยใช้ Angular + bootstrap สำหรับการออกแบบที่ตอบสนองได้

สิ่งที่เป็นโครงการบางโครงการที่กำลังจะมาถึงจะต้องมีทั้งเว็บไซต์มือถือและแอพพื้นฐาน (อิออนไฮบริด) คุณสมบัติและหน้าจอส่วนใหญ่จะเหมือนกันแชร์แบ็คเอนด์และ UI ส่วนใหญ่ แต่ก็ยังมีความแตกต่างอยู่บ้าง

ดังนั้นคำถามของฉันคือ วิธีสร้างสถาปัตยกรรมโครงการเพื่อให้สามารถเป็นทั้งโครงการไอออนิกและเว็บไซต์เชิงมุมปกติที่มีวิธีการปรับใช้ที่แตกต่างกัน 2 แบบ โค้ดส่วนใหญ่จะถูกนำกลับมาใช้ใหม่ แต่บางมุมมองสำหรับเว็บไซต์มือถือและบางมุมมองสำหรับแอปไฮบริด (ใช้ส่วนประกอบและแบบแผนดั้งเดิมมากขึ้น) อาจมีความแตกต่างของเส้นทางเช่นกัน

นั่นเป็นความคิดที่ดีใช่ไหม

และในรหัสที่ใช้ร่วมกันมีวิธีง่ายๆที่จะรู้ว่าในกรณีใดคุณ? IF บางคำสั่งที่ไม่ได้ใช้งานอยู่นอกบริบทของพวกเขา ฯลฯ

รู้สึกเหมือนมีลิงค์ที่ขาดหายบางประเภทที่ฉันอาจไม่รู้

ขอบคุณล่วงหน้า.

คำตอบ:


2

คุณสามารถสร้างเคอร์เนลที่ใช้ร่วมกันซึ่งมีatomics Components ( https://docs.angularjs.org/guide/component ) / Services

เว็บแอพ, แอพ android, แอพ ios, แอพการควบคุม ... ทั้งหมดจะใช้ฟังก์ชันการทำงานของเคอร์เนล, ในวิธีการปรับตัว

ลองนึกภาพถ้าคุณต้องการปรับใช้แอพ Android การใช้https://material.io เข้ากันได้ดีกับความสามารถบางอย่างของ Android แอป iOS จะมีการออกแบบที่แตกต่าง ( https://developer.apple.com/ios/human-interface-guidelines/overview/themes/ ) ฯลฯ ...

สร้างการใช้งานที่มั่นคงและใช้องค์ประกอบ atomics และปรับพวกเขา!


0

สำหรับแอพมือถือที่ใช้ Ionic และเว็บแอปที่ใช้ AngularJS หรือ Angular เป็นเรื่องธรรมดามากที่แอพเหล่านี้บางตัวจะมีฟังก์ชั่นการแชร์เช่นการเชื่อมต่อกับเซิร์ฟเวอร์และรับข้อมูลบางอย่าง แต่นั่นไม่ได้หมายความว่าคุณจะไม่มีสำเนา ในโครงการใหม่ของคุณ

ประเด็นของฉันคือถ้าคุณรู้ว่าจะมีความแตกต่างของเลเยอร์ UI เท่านั้นและโครงการต้องการแอปพลิเคชันเว็บและแอพมือถือและคุณสามารถมี 3 ชั้นซึ่ง UI สำหรับแอปเว็บสามารถอยู่ในเชิงมุมและแอพมือถือ ประโยชน์ที่คุณจะได้รับจากการใช้ฟังก์ชั่นดั้งเดิมเช่นคอร์โดวาโฟนแคปหรือไอออนิกอาจจะมากกว่าที่เก็บไว้ในรูปแบบเดียว

ฉันต้องการทำให้ชัดเจนว่าไม่ยากที่จะสลับไปมาระหว่าง UIs เหล่านี้ในกรณีที่ลูกค้าของคุณต้องการแปลงเว็บแอปเป็นแอปมือถือทั่วไป

ฉันจะเริ่มต้นด้วยคำถามต่อไปนี้

  1. โครงการนี้ต้องการ UI แยกต่างหากสำหรับมือถือหรือไม่
  2. โครงการนี้ต้องการฟังก์ชั่นมือถือเนทีฟหรือไม่?
  3. โครงการนี้ต้องการ UI แยกต่างหากและฟังก์ชั่นที่สำรองไว้สำหรับมือถือหรือไม่

หากคำตอบของคุณคือใช่สำหรับทั้ง 3 ให้สร้างสองโครงการ หากคำตอบของคุณคือใช่สำหรับ 1 และ 2 ให้สร้างแบ็กเอนด์เชิงมุมและเว็บแอปพร้อมกับแอปพลิเคชันไอออนิกหรือโทรศัพท์ หากคำตอบของคุณคือใช่ต่อ 1 เท่านั้นฉันจะแนะนำอีกครั้งโดยใช้เชิงมุมสำหรับทั้งคู่

หากคุณต้องการใช้มุมมองเชิงมุมใน ionic (มองหาสิ่งต่าง ๆ ) คุณจะมีรหัสเดียวกันทั้งด้านหน้าแอพมือถือและเว็บแอป ในตอนท้ายคุณจะสามารถจัดการการติดตามได้อย่างอิสระ:

  1. การย้ายฐานข้อมูล
  2. ฟังก์ชันการทำงานแบ็คเอนด์ฝั่งเซิร์ฟเวอร์พร้อม API ที่เชื่อมต่อกับ 1 สำหรับข้อมูล
  3. แอพพลิเคชั่นเว็บส่วนหน้าโดยใช้ Angular Views บริโภค 2
  4. หากจำเป็นต้องใช้แอพมือถือจะใช้ Ionic / phonegap เพื่อแก้ไขการพึ่งพาอุปกรณ์ แต่ใช้ Angular เพื่อสร้างมุมมองและใช้ 2

หวังว่าสิ่งนี้จะช่วยและเปิดการอภิปรายเล็กน้อย

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.