µn¤J
¡U
µù¥U
¡U
·|û¤¤¤ß
¡U
µ²±b
¡U
°ö°V½Òµ{
Å]ªk§Ì¤l
¡U
¦Û¸ê¥Xª©
¡U
¹q¤l®Ñ
¡U
«ÈªA¤¤¤ß
¡U
´¼¼z«¬¥ßÊ^·|û
®Ñ¦W
¥Xª©ªÀ
§@ªÌ
isbn
½s¸¹
5050Å]ªk²³Äw
|
NG®Ñ«°
|
°ê»Ú¯Å«~µP½Òµ{
|
Àu´f³qª¾
|
ÅRÆE^¶¯µ¼Öºë¿ï
|
jQueryºô¶³]p½d¨Ò±Ð¾Ç
¦¹§@ªÌµL¬ÛÃö®ÑÄy
¤å¾Ç¤p»¡
¤å¾Ç
¡U
¤p»¡
°ÓºÞ³Ð§ë
°]¸g§ë¸ê
¡U
¦æ¾P¥øºÞ
¤H¤åÃÀ§{
©v±Ð¡Bõ¾Ç
ªÀ·|¡B¤H¤å¡B¥v¦a
ÃÀ³N¡B¬ü¾Ç
¡U
¹q¼vÀ¸¼@
Ày§Ó¾i¥Í
ÂåÀø¡B«O°·
®Æ²z¡B¥Í¬¡¦Ê¬ì
±Ð¨|¡B¤ß²z¡BÀy§Ó
¶i׾Dzß
¹q¸£»Pºô¸ô
¡U
»y¨¥¤u¨ã
Âø»x¡B´Á¥Z
¡U
x¬F¡Bªk«ß
°Ñ¦Ò¡B¦Ò¸Õ¡B±Ð¬ì¥Î®Ñ
¬ì¾Ç¤uµ{
¬ì¾Ç¡B¦ÛµM
¡U
¤u·~¡B¤uµ{
®a®x¿Ë¤l
®a®x¡B¿Ë¤l¡B¤H»Ú
«C¤Ö¦~¡Bµ£®Ñ
ª±¼Ö¤Ñ¦a
®È¹C¡B¦a¹Ï
¡U
¥ð¶¢®T¼Ö
º©µe¡B´¡¹Ï
¡U
¨î¯Å
¨M¾Ô¡I·L«eºÝ¬[ºc Micro Frontends¡G·s¤@¥N¥iÂX®iªººô¶¶}µo¼Ò¦¡¡A¹ê²{¦UºØ®Ø¬[ªºµLÁ_¾ã¦X»P·¾³q
Micro Frontends in Action
§@ªÌ¡G
Michael Geers
ĶªÌ¡G
林亭儀
¤ÀÃþ¡G
¹q¸£»Pºô¸ô
¡þ
ºô¶À³¥Î
¥Xª©ªÀ¡G
ºX¼Ð
¥Xª©¤é´Á¡G2023/9/27
ISBN¡G9789863127109
®ÑÄy½s¸¹¡Gkk0575517
¶¼Æ¡G416
©w»ù¡G
820
¤¸
Àu´f»ù¡G
95
§é
779
¤¸
®Ñ»ùY¦³²§°Ê¡A¥H¥Xª©ªÀ¹ê»Ú©w»ù¬°·Ç
¼È°±³c°â
¼ÈµL¨ÑÀ³°Ó¡G´M§ä¨Ñ³f°Ó¤¤(¤]¦³¥i¯à¥Xª©ªÀ¤wµ²§ô)¡C
¹ÎÁʼƳ̧C¬° 20 ¥»¥H¤W
µû»ù¼Æ¡G
(½Ð±N·Æ¹«²¾¦Ü¬P¬P³B¶i¦æµû»ù)
¥Ø«e¥§¡µû»ù¡G
¤å¦r³sµ²
½Æ»s»yªk
¨M¾Ô¡I·L«eºÝ¬[ºc Micro Frontends¡G·s¤@¥N¥iÂX®iªººô¶¶}µo¼Ò¦¡¡A¹ê²{¦UºØ®Ø¬[ªºµLÁ_¾ã¦X»P·¾³q
¹Ï¤ù³sµ²
½Æ»s»yªk
¤À
¨É
¤º®e²¤¶
§@ªÌ¤¶²Ð
®ÑÄy¥Ø¿ý
¦PÃþ±ÀÂË
決戰!微前端架構 Micro Frontends:新一代可擴展的網頁開發模式,實現各種框架的無縫整合與溝通 內容簡介 目前業界的軟體開發多半依照不同技術採水平分工模式, 例如:一組負責前端、一組負責後端, 但這跟一般企業的組織劃分有所不同, 導致所有開發案都必須跨部門、跨開發團隊進行協調, 團隊溝通變得越來越麻煩, 在經典之作《人月神話》(The Mythical Man-Month) 一書中就描述了這個情況。 ▌擺脫傳統單體應用的思維, 現在就將微前端導入你的專案中! ▌ 微前端架構提倡的則是另一種做法:將應用程式垂直拆解, 每個區塊交給一個專責團隊負責, 一條龍地包含從資料庫連接到使用者介面的開發。不同團隊的前端單元會在客戶端的瀏覽器內整合, 構成最終的頁面。用更容易理解的說法, 微前端就像是帶有使用者介面的微服務架構。 聽起來是要每個開發團隊各自為政, 相信有經驗的開發者可能馬上會想到:那採用不同的技術怎麼整合?會不會有效能瓶頸?類似的功能應該很容易重複開發吧?後端伺服器要各自架設?版本控制要各自維護?各做各的那介面怎麼統一? 微前端架構當然不可能毫無缺點, 以團隊的角度, 程式碼或資源的冗餘自然是無可避免, 不過只要配套機制運作得當, 所帶來的可擴展性、靈活性,仍然是利大於弊。本書就要教你怎麼無痛建構、轉換到微前端的開發架構。 別擔心要多學新的框架, 雖然確實有一些完全符合微前端概念的框架可以直接套用, 但作者想強調的是微前端架構的概念和選用時機, 若強迫用特定的框架, 很有可能馬上澆熄你的熱情。因此本書會在現有常見的網路技術規範下, 引入微前端的基本機制, 不管你的網站或應用程式採用哪種技術所建構, 幾乎都可以適用。 為了適用各種不同的情境, 作者提供了超過 20 個開發上的使用案例, 協助你將手上專案順利導入微前端的開發架構。除了技術上的交流, 作者也在書中提供不少團隊開發該留意的經驗分享, 界定好開發團隊的責任歸屬, 做好跨團隊間的溝通協調, 讓微前端架構發揮最大價值。 如果你受夠巨無霸一大包的前端單體架構所帶來的諸多困擾, 有了上述這些指引, 現在正是導入微前端架構的好時機, 對於新一代網頁開發人員、架構師或團隊領導者, 相信會帶來非常大的助益。 本書特色 全書共收錄超過 20 個微前端架構的使用案例, 從簡單的超連結、iframe 和 Ajax 入門, 到較為複雜的 SSI 伺服器端內嵌、ESI、Tailor、Podium、Web Components 以及 app shell、通用渲染等, 並且讓你可以靈活將這些工具和技巧應用於真實情境中。 ● 將不同的應用程式建構為統一的前端頁面。 ● 無縫整合採用各種框架的 JavaScript 程式碼。 ● 各種伺服端與客戶端的整合技術與頁面路由技巧。 ● 協助釐清專案需求, 挑選正確的架構及整合技術。 ● 建構設計系統的樣式庫, 提供一致性的 UI/UX。 ● 提高團隊開發效率並優化專案執行流程。
¥Ø¿ý ¢m²Ä¤@½g ½ñ¤W·L«eºÝªº¹D¸ô ¢m ²Ä 1 ³¹ ³¹ ¦ó¿×·L«eºÝ¡H 1.1±q¤j³BµÛ²´¢w¢w·L«eºÝ·§Æ[ 1.2·L«eºÝ¸Ñ¨M¤F¨º¨Ç°ÝÃD¡H 1.3·L«eºÝªº¯ÊÂI 1.4§A¦ó®ÉÀ³¸Ó±Ä¯Ç·L«eºÝ¡H ²Ä 2 ³¹ §Úªº²Ä¤@Ó·L«eºÝ±M®×¡G¶W³sµ²¤Î iframe ¾ã¦X 2.1©ì¦²¾÷°Ó©± 2.2³z¹L¶W³sµ²Âà¶ 2.3³z¹Liframe¨Ó²Õ¦X¶± 2.4±µ¤U¨Ó°µ¤°»ò¡H ¢m²Ä¤G½g ¸ô¥Ñ¡B¾ã¦X¤Î·¾³q ¢m ²Ä 3 ³¹ ¥H Ajax ¾ã¦X°Ï¶ô¨Ã¨Ï¥Î¦øªA¾¹ºÝ¸ô¥Ñ 3.1³z¹LAjax¾ã¦X 3.2³z¹LNginx°µ¦øªA¾¹ºÝ¸ô¥Ñ ²Ä 4 ³¹ ¦øªA¾¹ºÝ¾ã¦X¡GSSI »P¥N²z¦øªA¾¹ 4.1³z¹LNginx»P¦øªA¾¹ºÝ¤º´O(SSI)¨Ó¾ã¦X 4.2¶±°Ï¶ô¥X¿ùªº³B²z¤è¦¡ 4.3²`¤J¤F¸Ñ¼Ð°OÀɾã¦Xªº®Ä¯à ¥¦æ¸ü¤J¡B±_ª¬¶±°Ï¶ô¡B©µ¿ð¸ü¤J¡Bº¦ì¤¸²Õ®É¶¡(TTFB)¤Î¦ê¬y 4.4¨ä¥L¸Ñ¨M¤è®×ªº§Ö³t¤¶²Ð Ãä½t¤º´O(ESI)¡BZalandoTailor¡BPodium 4.5¦øªA¾¹ºÝ¾ã¦XªºÀu¯ÊÂI ²Ä 5 ³¹ «È¤áºÝ¾ã¦X¡G¨Ï¥Î Web Components¤Î Shadow DOM 5.1¥HWebComponents«Ê¸Ë·L«eºÝ°Ï¶ô 5.2¨Ï¥ÎShadowDOM°µ¼Ë¦¡¤ÀÂ÷ 5.3¨Ï¥ÎWebComponents°µ¾ã¦XªºÀu¯ÊÂI ²Ä 6 ³¹ ·¾³q¼Ò¦¡¡Gºô§}¡BÄݩʻP¨Æ¥ó 6.1¨Ï¥ÎªÌ¤¶±·¾³q ¥D¶±¹ï¶±°Ï¶ô¡B¶±°Ï¶ô¹ï¥D¶±¡B¶±°Ï¶ô¹ï¶±°Ï¶ô¡B¥HBroadcastChannelAPI¡B¾A¦X¨Ï¥Î¸óUI·¾³qªº®É¾÷ 6.2¨ä¥L·¾³q¾÷¨î ¥þ°ìcontextinformation¤Î¨¤ÀÅçÃÒ.¡BºÞ²zª¬ºA¡B«e«áºÝ·¾³q¡B¸ê®Æ½Æ»s ²Ä 7 ³¹ «È¤áºÝ¸ô¥Ñ»P app shell¡G²Î¤@³æÅéÀ³¥Îµ{¦¡ 7.1¥±¦¡¸ô¥Ñªºappshell 7.2appshell»PÂù¼h¸ô¥Ñ 7.3§Ö³t»{ÃÑsingle-spa¤¸®Ø¬[ 7.4¶}µo²Î¤@³æ¶À³¥Îµ{¦¡ªº¬D¾Ô ²Ä 8 ³¹ «e«áºÝ¾ã¦X§Þ¥©¤Î³q¥Î´è¬V 8.1µ²¦X¦øªA¾¹ºÝ¤Î«È¤áºÝ¾ã¦X SSI¤Îºô¶¤¸¥ó¡B¹Î¶¤¤§¶¡ªº«´¬ù¡B¨ä¥L¸Ñ¨M¤è®× 8.2¦ó®É¸Ó¨Ï¥Î³q¥Î´è¬V¡H ²Ä 9 ³¹ §Úªº±M®×¾A¦X¦óºØ¬[ºc¡H 9.1±M¦³¦Wµü¦^ÅU 9.2½ÆÂø«×¤ñ¸û 9.3§A¬O¦b¥´³yºô¶ÁÙ¬OÀ³¥Îµ{¦¡¡H 9.4¬D¿ï¥¿½Tªº¬[ºc¤Î¾ã¦X§Þ³N ¢m²Ä¤T½g ¦p¦ó°µ±o§Ö¡B¤@P¥B¦³®Ä²v ¢m ²Ä 10 ³¹ ¸ü¤J¸ê·½³Ì¨Î¤Æ 10.1¸ê·½°Ñ·Óµ¦²¤ ª½±µ°Ñ·Ó¡B§Ö¨ú¯}Ãa¤Î¿W¥ß³¡¸p¡B³z¹L«·s¾É¦V¨Ó°Ñ·Ó¡B³z¹Linclude¨Ó°Ñ·Ó¡B¦P¨B¼Ð°O»y¨¥ÀɤÎÀɮת©¥»¸¹¡B¦æ¤ºµ{¦¡½X¡BTailor¡BPodiumµ¥¾ã¦X¤è®× 10.2bundle (¥´¥]ÀÉ) ªº©î¤Àµ{«× HTTP/2¡B¥þ¥]bundle¡B¹Î¶¤bundle¡B¶±¤Î¶±°Ï¶ôbundle 10.3ÀH¿ï¸ü¤J ¥N²z·L«eºÝ¡B©µ¿ð¸ü¤JCSS ²Ä 11 ³¹ ®Ä¯à¬OÃöÁä¡G´î¤Ö¤¾¾l¨ç¦¡®w 11.1¥H®Ä¯à¬°¥XµoÂI¨Ó¨î©w¬[ºc 11.2²Ä¤T¤è¨ç¦¡®w¡GÁY´î»P«½Æ§Q¥Î ²Ä 12 ³¹ ¨Ï¥ÎªÌ¤¶±¤Î³]p¨t²Î 12.1¬°¦ó»Ýn¤@®M³]p¨t²Î¡H ³]p¨t²Îªº¥Øªº»P¨¤¦â¡B³]p¨t²Îªº¦n³B 12.2¤¤¥¡³]p¨t²Îvs.¿W¥ß¦Û¥Dªº¹Î¶¤ 12.3°õ¦æ´Á¶¡¾ã¦Xvs.«Ø¸m¶¥¬q¾ã¦X 12.4¼Ë¦¡®wªº¦¨«~¡G³q¥Îvs.±M¥Î 12.5¤¤¥¡¼Ë¦¡®w¸Ó¥]§t¤°»ò¡H ²Ä 13 ³¹ ¥H Ajax ¾ã¦X°Ï¶ô¨Ã¨Ï¥Î¦øªA¾¹ºÝ¸ô¥Ñ 13.1½Õ¾ã¨t²Î»P¹Î¶¤ 13.2ª¾ÃѦ@¨É 13.3¾î¤ÁÃöª`ÂI 13.4§Þ³N¦h¼Ë©Ê ²Ä 14 ³¹ ¨t²Î¾E²¾¡B¥»¦a¶}µo¤Î´ú¸Õ 14.1¾E²¾ º¥¶i¦¡¾E²¾¡B«eºÝÀu¥ý¡Bºñ¦a±M®×¤Î¡y¤jÅRÆE¡z 14.2¥»¾÷¶}µo 14.3´ú¸Õ
¸òµÛ¹ê°È¾Ç²ßHTML
²`¤J²L¥X JavaS
¬Æ»ò¡Hºô¶¤]¥i¥H°µ¬£
ºë³qJavaScri
¤µ±ß¨ÓÂIWeb«eºÝ®Ä
Effective
¬íÀ´AI»²§U¦æ°Êºô¶
AI®É¥Nªººô¶³]pH
HTML/CSS/J
¬°§A¼gªºVue Co
¬°¤F«O»Ù±zªºÅv¯q¡A·sµ·¸ôºô¸ô®Ñ©±©ÒÁʶRªº°Ó«~§¡¨É¦³¨ì³f¤C¤ÑªºÅ²½à´Á¡]§t¨Ò°²¤é¡^¡C°h¦^¤§°Ó«~¥²¶·©óŲ½à´Á¤º±H¦^¡]¥H¶lÂW©Î¦¬°õÁp¬°¾Ì¡^¡A¥B°Ó«~¥²¶·¬O¥þ·sª¬ºA»P§¹¾ã¥]¸Ë(°Ó«~¡Bªþ¥ó¡B¤º¥~¥]¸Ë¡BÀH³f¤å¥ó¡BÃØ«~µ¥)¡A§_«h®¤¤£±µ¨ü°h³f¡C