µ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Ãþ±ÀÂË
決戰¡I微前端架構 Micro Frontends¡G新一代可擴展的網¶¶}發模式¡A實現各種框架的無縫整合»P溝³q 內容簡介 ¡@¡@目前業界的³nÅé¶}發多半依照不同技³N採水平分工模式, 例如¡G一組t³d前端¡B一組t³d後端, 但³o¸ò一¯ë企業的組織劃分有所不同, 導P所有¶}發案³£必¶·¸ó³¡ªù¡B¸ó¶}發團¶¤¶i¦æ協½Õ, 團¶¤溝³qÅÜ得¶V來¶V³Â煩, 在經典之作¡m人月神¸Ü¡n(The Mythical Man-Month) 一書中就描z了³o個情況¡C ¡@¡@▌擺²æ傳統單Åé應用的思維, 現在就將微前端導入你的專案中¡I ▌ ¡@¡@微前端架構提倡的則是另一種做法¡G將應用程式垂直拆¸Ñ, 每個區塊交給一個專³d團¶¤t³d, 一條Às地包含從¸ê料庫³s接到使用ªÌ介±的¶}發¡C不同團¶¤的前端單元會在客戶端的瀏Äý器內整合, 構成最終的¶±¡C用更容易理¸Ñ的»¡法, 微前端就像是帶有使用ªÌ介±的微服務架構¡C ¡@¡@Å¥°_來是n每個¶}發團¶¤各¦Û為政, 相信有經Åç的¶}發ªÌ可¯à°¨上會想到¡G¨º採用不同的技³N怎»ò整合¡H會不會有效¯à瓶ÀV¡HÃþ似的功¯à應¸Ó很容易«½Æ¶}發吧¡H後端伺服器n各¦Û架³]¡H版本控制n各¦Û維Å@¡H各做各的¨º介±怎»ò統一¡H ¡@¡@微前端架構當然不可¯à毫無缺ÂI, 以團¶¤的¨¤度, 程式碼或¸ê源的冗¾l¦Û然是無可Á×免, 不¹L只n°t套機制¹B作得當, 所帶來的可擴展性¡BÆF活性¡A仍然是利大於弊¡C本書就n教你怎»ò無痛建構¡BÂà換到微前端的¶}發架構¡C ¡@¡@別擔心n多學新的框架, Áö然確實有一些完全符合微前端概念的框架可以直接套用, 但作ªÌ想強½Õ的是微前端架構的概念和¿ï用時機, Y強¢用特定的框架, 很有可¯à°¨上澆熄你的熱情¡C因此本書會在現有常¨£的網¸ô技³N³W範下, 引入微前端的基本機制, 不管你的網站或應用程式採用哪種技³N所建構, 幾乎³£可以¾A用¡C ¡@¡@為了¾A用各種不同的情境, 作ªÌ提供了¶W¹L 20 個¶}發上的使用案例, 協助你將手上專案¶¶利導入微前端的¶}發架構¡C°£了技³N上的交流, 作ªÌ也在書中提供不少團¶¤¶}發¸Ó留意的經Åç分享, 界定好¶}發團¶¤的³d任歸屬, 做好¸ó團¶¤¶¡的溝³q協½Õ, Åý微前端架構發揮最大價值¡C ¡@¡@ ¡@¡@如果你受夠巨無ÅQ一大包的前端單Åé架構所帶來的½Ñ多困擾, 有了上z³o些指引, 現在正是導入微前端架構的好時機, 對於新一代網¶¶}發人員¡B架構師或團¶¤»â導ªÌ, 相信會帶來«D常大的助益¡C 本書特¦â ¡@¡@全書共收¿ý¶W¹L 20 個微前端架構的使用案例, 從簡單的¶W³s結¡Biframe 和 Ajax 入ªù, 到¸û為½ÆÂø的 SSI 伺服器端內嵌¡BESI¡BTailor¡BPodium¡BWeb Components 以及 app shell¡B³q用渲染等, 並且Åý你可以ÆF活將³o些工具和技巧應用於真實情境中¡C ¡@¡@● 將不同的應用程式建構為統一的前端¶±¡C ¡@¡@● 無縫整合採用各種框架的 JavaScript 程式碼¡C ¡@¡@● 各種伺服端»P客戶端的整合技³N»P¶±¸ô由技巧¡C ¡@¡@● 協助Âç清專案»Ý求, 挑¿ï正確的架構及整合技³N¡C ¡@¡@● 建構³]p系統的樣式庫, 提供一P性的 UI/UX¡C ¡@¡@● 提°ª團¶¤¶}發效率並優化專案執¦æ流程¡C
¥Ø¿ý ¢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