{"metadata":{"_oai":{"id":"oai:ipsj.ixsq.nii.ac.jp:00218754","sets":["934:935:10774:10957"]},"path":["10957"],"owner":"44499","recid":"218754","title":["Implementing Micro Frontends Using Signal-based Web Components"],"pubdate":{"attribute_name":"公開日","attribute_value":"2022-07-04"},"_buckets":{"deposit":"27c9bbe4-cae0-4df1-bf59-f73358f0e1f0"},"_deposit":{"id":"218754","pid":{"type":"depid","value":"218754","revision_id":0},"owners":[44499],"status":"published","created_by":44499},"item_title":"Implementing Micro Frontends Using Signal-based Web Components","author_link":["569573","569574","569572","569571"],"item_titles":{"attribute_name":"タイトル","attribute_value_mlt":[{"subitem_title":"Implementing Micro Frontends Using Signal-based Web Components"},{"subitem_title":"Implementing Micro Frontends Using Signal-based Web Components","subitem_title_language":"en"}]},"item_keyword":{"attribute_name":"キーワード","attribute_value_mlt":[{"subitem_subject":"[通常論文] reactive programming, JavaScript, modularity","subitem_subject_scheme":"Other"}]},"item_type_id":"3","publish_date":"2022-07-04","item_3_text_3":{"attribute_name":"著者所属","attribute_value_mlt":[{"subitem_text_value":"Graduate School of Engineering, Oita University"},{"subitem_text_value":"Division of Computer Science and Intelligent Systems, Oita University"}]},"item_3_text_4":{"attribute_name":"著者所属(英)","attribute_value_mlt":[{"subitem_text_value":"Graduate School of Engineering, Oita University","subitem_text_language":"en"},{"subitem_text_value":"Division of Computer Science and Intelligent Systems, Oita University","subitem_text_language":"en"}]},"item_language":{"attribute_name":"言語","attribute_value_mlt":[{"subitem_language":"eng"}]},"item_publisher":{"attribute_name":"出版者","attribute_value_mlt":[{"subitem_publisher":"情報処理学会","subitem_publisher_language":"ja"}]},"publish_status":"0","weko_shared_id":44499,"item_file_price":{"attribute_name":"Billing file","attribute_type":"file","attribute_value_mlt":[{"url":{"url":"https://ipsj.ixsq.nii.ac.jp/record/218754/files/IPSJ-TPRO1503002.pdf","label":"IPSJ-TPRO1503002.pdf"},"date":[{"dateType":"Available","dateValue":"2024-07-04"}],"format":"application/pdf","billing":["billing_file"],"filename":"IPSJ-TPRO1503002.pdf","filesize":[{"value":"1.3 MB"}],"mimetype":"application/pdf","priceinfo":[{"tax":["include_tax"],"price":"0","billingrole":"5"},{"tax":["include_tax"],"price":"0","billingrole":"6"},{"tax":["include_tax"],"price":"0","billingrole":"15"},{"tax":["include_tax"],"price":"0","billingrole":"44"}],"accessrole":"open_date","version_id":"36e1a7e8-1c88-4b4f-9cbf-17eb3af0ac1e","displaytype":"detail","licensetype":"license_note","license_note":"Copyright (c) 2022 by the Information Processing Society of Japan"}]},"item_3_creator_5":{"attribute_name":"著者名","attribute_type":"creator","attribute_value_mlt":[{"creatorNames":[{"creatorName":"Yuma, Nishizu"}],"nameIdentifiers":[{}]},{"creatorNames":[{"creatorName":"Tetsuo, Kamina"}],"nameIdentifiers":[{}]}]},"item_3_creator_6":{"attribute_name":"著者名(英)","attribute_type":"creator","attribute_value_mlt":[{"creatorNames":[{"creatorName":"Yuma, Nishizu","creatorNameLang":"en"}],"nameIdentifiers":[{}]},{"creatorNames":[{"creatorName":"Tetsuo, Kamina","creatorNameLang":"en"}],"nameIdentifiers":[{}]}]},"item_3_source_id_9":{"attribute_name":"書誌レコードID","attribute_value_mlt":[{"subitem_source_identifier":"AA11464814","subitem_source_identifier_type":"NCID"}]},"item_resource_type":{"attribute_name":"資源タイプ","attribute_value_mlt":[{"resourceuri":"http://purl.org/coar/resource_type/c_6501","resourcetype":"journal article"}]},"item_3_source_id_11":{"attribute_name":"ISSN","attribute_value_mlt":[{"subitem_source_identifier":"1882-7802","subitem_source_identifier_type":"ISSN"}]},"item_3_description_7":{"attribute_name":"論文抄録","attribute_value_mlt":[{"subitem_description":"Micro frontends are an emerging architectural style that involves combining independently created frontend applications to develop a larger application. In JavaScript, the high modularity required for micro frontends can be achieved using the Web Components API, but passing data between components requires the use of event mechanisms and their corresponding callback functions, which make the code difficult to understand. In this paper, we propose using signals in reactive programming (RP) as an API to solve this problem and enable declarative dataflow, as well as maintain high modularity. To demonstrate the effectiveness of the proposed approach, we have developed a JavaScript extension that can express the web components themselves as signals and used it to implement a simple single-page application (SPA), which is then compared with the implementation using the Web Components API. We have also conducted a similar implementation in the existing reactive frontend application framework called React and argue that the implementation using signals has better modularity.\n------------------------------\nThis is a preprint of an article intended for publication Journal of\nInformation Processing(JIP). This preprint should not be cited. This\narticle should be cited as: Journal of Information Processing Vol.30(2022) (online)\n------------------------------","subitem_description_type":"Other"}]},"item_3_description_8":{"attribute_name":"論文抄録(英)","attribute_value_mlt":[{"subitem_description":"Micro frontends are an emerging architectural style that involves combining independently created frontend applications to develop a larger application. In JavaScript, the high modularity required for micro frontends can be achieved using the Web Components API, but passing data between components requires the use of event mechanisms and their corresponding callback functions, which make the code difficult to understand. In this paper, we propose using signals in reactive programming (RP) as an API to solve this problem and enable declarative dataflow, as well as maintain high modularity. To demonstrate the effectiveness of the proposed approach, we have developed a JavaScript extension that can express the web components themselves as signals and used it to implement a simple single-page application (SPA), which is then compared with the implementation using the Web Components API. We have also conducted a similar implementation in the existing reactive frontend application framework called React and argue that the implementation using signals has better modularity.\n------------------------------\nThis is a preprint of an article intended for publication Journal of\nInformation Processing(JIP). This preprint should not be cited. This\narticle should be cited as: Journal of Information Processing Vol.30(2022) (online)\n------------------------------","subitem_description_type":"Other"}]},"item_3_biblio_info_10":{"attribute_name":"書誌情報","attribute_value_mlt":[{"bibliographic_titles":[{"bibliographic_title":"情報処理学会論文誌プログラミング（PRO）"}],"bibliographicIssueDates":{"bibliographicIssueDate":"2022-07-04","bibliographicIssueDateType":"Issued"},"bibliographicIssueNumber":"3","bibliographicVolumeNumber":"15"}]},"relation_version_is_last":true,"weko_creator_id":"44499"},"id":218754,"updated":"2025-01-19T14:37:34.032225+00:00","links":{},"created":"2025-01-19T01:19:06.132816+00:00"}