 Sekarang perkara yang saya fikir akan berlaku... Jadi, pertama, beberapa begitulah. Kenapa ia berlaku dan kenapa saya bercakap dengan anda tentang perkara ini? Pada berita yang teruk, Angler.js akan mengubah sokongan yang panjang di Julai 2021. Kami sedang berusaha selama 3 tahun ke masa yang panjang di sini. Sebelum itu menerima, saya rasa yang ada pendapat yang masih ingin mempunyai sokongan untuk perkara yang dia menggunakan, adalah menggantikan perkara yang berlaku untuk mengubah sokongan atau beberapa perkara lain. Dan kemudian, menggantikan perkara yang berlaku dari Angler.js untuk Angler, yang paling berlaku dari Angler. Apabila menggantikan perkara yang berlaku dari Angler.js ke Angler, ia akan sangat susah. Mereka sudah berlaku di atas jalanan yang berlaku dari jalanan yang berlaku. Anda dapat mengenangkan penyelamatan yang berlaku. Dan jika anda mengenangkan penyelamatan javascript ini dan Tine 5, anda akan mengenangkan itu untuk mempunyai penyelamatan. Untuknya, petunjelib ini juga digunakan bahwa anda terbaik jika anda memiceskirkan banyak jes dari Angler.js tersebut ke kedua-dua generator atau komponerasan. Sebenarnya untuk menjadi lebih baik dengan ingin penyelamatan bahasa Angler yang muda mengenangkan perusahaan yang mengembalikkan apabila memakai klik physically pilihan komponen utama. Oleh atau begitu, jika anda memutuskan dan memikirkan ke Angler, anda akan mengenangkan perkara yang berlaku dari beberapa kek. ...at least a very, very invasive change. So, rewrite. You can either release a rewrite all in one goal... ...or you can do a rewrite incrementally. I think most people in this room would probably intuitively know... ...that migrating in your application all in one goal is inherently risky... ...so I'm not going to add very much up here... ...except to say that the British Bank, TSB, tried to do exactly that... ...sometime ago and they were rewarded with 10 weeks worth of IT outages. I don't think you want that. So, migrations tend to be less risky if you do them incrementally. And they also have this other nice side effect to it. You can actually perform your incremental migration... ...while you're still delivering features for your client... ...while you're doing all bits of important work... ...that you might need to do in your course of work. In the context of front-ends, you can do your front-end migration in one of two ways. You could start at the frangas of your application. Just start with the simplest self-contained components... ...and then slowly work your way up... ...building on top of that until you get to the point... ...where you can cleanly replace your framework... ...and all the bits that inject data into your components... ...all in one goal and then replace AngularJS with React. Or you could start off replacing AngularJS with React from the get-go... ...and then mount all your legacy AngularJS components onto the new thing. And then from there, you have the luxury of time to actually work your way... ...down the application up to the fringes... ...ending off with the simple stuff. So, turns out, this pattern of incremental migration... ...actually has a name. It's known as the strangler pattern. So, the term is coined by Martin Fowler... ...from ThoughtWorks, and basically the name is derived... ...dari strangler fig trees, of which we get a few in Singapore. Now, strangler fig trees basically grow by planting itself onto a host tree. Overtime that the strangler tree actually grows larger and larger... ...it will start taking directing resources away from the host tree... ...and over time, as it out competes the host tree for resources... ...the strangler will basically kill the host tree... ...leaving the strangler standing. So, in a similar vein, the strangler pattern kind of works... ...by injecting a new component or new model into an application... ...and the developer will then start directing data flow... ...and maybe user interactions towards this new model... ...on top of the legacy application. Overtime, you basically build around that new component... ...and it grows and grows, directing more and more data... ...and more and more user interactions away from the legacy application... ...until you can actually safely decommission the old part... ...leaving the new application standing in its own right. Cool. So, with all that in mind, I'm going to just talk a bit... ...about some of the common patterns and techniques... ...we're going to be using to perform the migration. So, what I'm about to tell you guys... ...basically work on very important privates... ...whether it's AngularJS, whether it's the latest Angular... ...or Vuo React, they kind of work by basically manipulating elements... ...in the DOM and rendering their content onto that. So, ostensibly, if you can actually just expose a single element... ...until your UI framework to work on... ...it could just bootstrap itself onto that... ...and you can go off to do its own thing. Or to rephrase what I just said... ...if one framework can actually expose a DOM element... ...to another framework to mount itself onto... ...you can actually have the two frameworks co-existing... ...peacefully with each other... ...and that will give you the basis... ...to actually perform your incremental migration. So, if you look at the slide here... ...whether it's Vuo, whether it's React... ...wether it's AngularJS, they basically work off the same premise. You basically tell it to bootstrap itself... ...by giving some blurb which is the application template... ...and you also identify an element... ...that you want the framework to render. So, you want the framework to render onto. Cool. For the next few slides, I've actually prepared some code pens... ...which you can then access using QR codes there. So, if you want to follow along, scan the QR code... ...and you'll be able to see a full example... ...of what I'm talking about. So, let's dive right in. AngularJS components and directives... ...typically expose the element... ...that they are mounted onto... ...using the variable known as $Element. So, for mounting React and view onto AngularJS... ...is pretty straightforward. What you do is you take $Element... ...and then you tell React... ...to basically render itself onto $Element... ...just like that. And you already have React mounted... ...on top of AngularJS, in this example. Of course, you kind of want this rendering... ...to happen all the time, in particular... ...whenever the AngularJS component... ...changes its state. So, you basically have to hook up... ...the render method onto the onChanges callback. So, the other way around, mounting AngularJS... ...onto view or React, it's somewhat more involved. So, I'm going to try to break it down... ...for you guys over the next few slides. The first thing you have to do is to basically... ...specify the AngularJS view as rawHTML. You then inject this rawHTML... ...into your host component. In the case of React, unfortunately... ...you have to use the dangerous... ...this thing called dangerously set in the HTML. And so, once you do that... ...your AngularJS view will be found... ...within the host component. Once that's done, you have to expose a reference... ...or rather, you basically have to expose... ...reference to the component template... ...such that it's actually accessible... ...programmatically within the controller part... ...of your React component, in this case. And once you have all that, what you do is that... ...during the bootstrapping phase of your... ...sorry, during the mounting phase... ...of your React component, you basically instruct AngularJS... ...to bootstrap itself onto the element reference... ...that you've exposed programmatically. So, once that happens, then you basically have... ...an AngularJS date-time picker mounted... ...on the React component, in this particular example. Cool. So, why isn't everybody trying to do... ...incremental migration from AngularJS... ...to React of you? Turns out, there are quite a number of pitfalls... ...that come with trying to do something like this. So, I'm just going to go through a few... ...of these problems. So, let's talk about React directly. React is kind of distinct from, say, View or Angular... ...in that it kind of enforces one-way data binding. That is, any data that you find within a component... ...cannot propagate to the rest of the application. Everything basically has to go one-way down. So, that's very distinct from AngularJS... ...which kind of supports two-way data binding. So, one of the things that you have to account for... ...is trying to rewrite parts of your AngularJS application... ...such that it understands that notion of using callbacks... ...to propagate changes in your data... ...to the rest of the application. So, more generally speaking, I think... ...I'm not sure whether you guys kind of noticed... ...but in fact, every time you host AngularJS... ...on to React, or the other way round... ...in effect, initialising a new application... ...on to your pre-existing application... ...that's hosting it. So, in this particular case you have here... ...you have a React application... ...hosting AngularJS components at the leaves. Each single AngularJS components... ...actually are AngularJS applications in its own right. Which also means that they probably don't realise... ...dia other components exist. And if your AngularJS application... ...kind of centres around event subscriptions... ...you might actually have problems. So, when you're doing something like this... ...you probably might have to introduce... ...other means to try to pass your events around. Either through introducing a third party message bus... ...or through the use of callbacks, again. So, yeah, that's something you can take into account. There are a whole bunch of other problems... ...that I probably won't be able to cover... ...due to scope of this talk... ...but I'll just quickly cover that. Firstly, React Router is not AngularUI Router. So, React Router kind of works off the basis of URLs. Whereas AngularUI Router is basically... ...a pure play state-based router. In addition, you also have to consider the fact... ...that you're trying to run two frameworks... ...in one application. So, the memory footprint will seem to be changed. So, you have to plan for that accordingly. So, maybe to just wrap up everything I've said so far... ...I'm going to talk about... ...why this matters to us at Open Government Products. Form SG is something that we kind of built. It was a government-formed builder... ...used by public servants. It's kind of gained very widespread adoption... ...by many government agencies. And as a result, that kind of led to two things. One, a lot of our engineering times... ...actually spent delivering features... ...sebelum berjumpa dengan pekerjaan pekerjaan. Selain itu, stabiliti sebenarnya... ...tidak menjadi keputusan. Kerana anda sekarang mempunyai perkara... ...yang semua public servants cuba menggunakan. Dan anda perlu pastikan... ...mereka boleh berjumpa dengan pekerjaan... ...tidak mempunyai keputusan. Jadi, sehingga saya beritahu semua itu... ...form SG juga berdasarkan... ...untuk projek Open Source... ...yang menggunakan AngularJS... ...sebelum itu. Dan walaupun jika kita berujakan... ...memang menggunakan AngularJS... ...pada keadaan itu... ...pada keadaan itu sebenarnya memulakan... ...masukkan cara untuk menggunakan... ...keputusan dan... ...dia sangat senang untuk berjalan. Jadi... ...dengan semua itu di dalam saya... ...kita perlu mencuba... ...berapa kita boleh... ...mencuba menggunakan form SG... ...dan memperbaiki keadaan... ...sebelum AngularJS... ...sebelum keadaan yang lama... ...sebelum itu berjalan. Dan mengubah keadaan yang mengubah... ...berjalan untuk berjalan... ...berjalan untuk berjalan... ...selepas masih... ...berjalan untuk mengubah keadaan. Jadi... ...berapa kita boleh beritahu tentang perkara ini... ...tapi... ...saya tak ada cukup masa... ...sehingga... ...saya akan menyebabkan... ...semua bahagian yang berkontak... ...untuk berbual yang boleh digunakan... ...kalau ada kota-kota di sini. Dan... ...kalau ada pertanyaan... ...saya boleh... ...mencuba untuk... ...mencuba saya selepas ini. Jadi... ...saya rasa itu untuk sekarang. Saya adalah Alvin. Saya seorang penjaja yang telah membuat produk keberadaan. Terima kasih kerana menolong masa. Terima kasih. Sebenarnya... ...komponan dalam JMS Angler... ...sebenarnya hanya berjalan... ...selepas versi 1.4 JMS Angler. Ya, tapi... ...apa yang anda lakukan... ...dalam sini, anda menyebabkan... ...dalam kota-kota... ...pembangunan angkut dan kota-kota... ...pembangunan angkut dan kota-kota. Tetapi... ...pembangunan angkut dan kota-kota... ...berjalan yang ada... Betul. Jadi anda dapatkan kota-kota ini... ...seperti sebab kota-kota yang ada... ...jadi saya hanya mahu tahu bagaimana... ...awak boleh membangunan angkut perkara lain... ...untuk menerima kontrol yang berbeda. Baiklah. Jadi perkaraan adalah... ...apa yang anda lakukan... ...dengan kemungkinan yang... ...masuk lelaki penjaja... ...bincangkan... ...berjalan dengan kota-kota JMS Angler... ...selepas versi 1.4 JMS Angler. Berapa kamu mengerima dengan... ...kota-kota JMS Angler... ...selepas versi 1.4 JMS Angler... ...yang menjemputkan... ...kota-kota dan kota-kota dan sebagainya. Jadi, menurut bahawa komponen dan komponen di dalam dan di setelah itu adalah sebuah perkara yang mempunyai kontrol dan periksaan seperti itu. Saya rasa pengalaman saya yang bekerja mencuba melakukan migrasi seperti ini sebenarnya sangat okey, jadi saya sebenarnya dapat menghidupkan kontrol angkut dan periksaan ke dalam komponen VAT. Kemudian saya hanya bekerja dari sana. Jadi, pertanyaan lain menghidupkan kerana menerima aplikasi dan menghidupkan aplikasi. Betul. Jadi, saya rasa apa yang saya tidak menyebabkan dalam slide saya adalah bahawa tidak hanya menggunakan FOMSG menggunakan angkut JS, perniagaan angkut JS dan sebagainya berlaku dengan sedikit organis. Jadi, saya rasa banyak perkara yang saya telah mempunyai dengan sebuah kawan saya tentang cara kita harus menghidupkan migrasi. Sebenarnya, saya rasa mempunyai menghidupkan aplikasi kita terlebih dahulu, ia sedikit lebih menghidupkan dan kemudian mempercayai menggunakan migrasi yang satu-satunya untuk menghidupkan JS untuk kembali yang lebih modern. Saya rasa itu mungkin itu mungkin sebuah perjalanan yang baik untuk membuatnya kerana ia membuat anda mendapatkan perasaan yang baik tentang bagaimana perkara yang sebenarnya berlaku di dalam kawan anda sebelum anda melakukannya. Jadi, sekurang-kurangnya itu berlaku dengan yang anda membahayakan sebelum anda melakukannya. Tapi, saya akan kembali ke depan. Apa yang saya tahu? Ada perkara yang berlaku dengan menggunakan migrasi yang satu-satunya untuk menggunakan perasaan yang satu-satunya. Ya. Mereka berbual dengan perkara yang sama. Maksud saya, ia mempunyai perkara yang lebih baik untuk menggunakan migrasi. Ya, ia mempunyai. Berapa lama yang terkenal untuk menggunakan perasaan yang baik? Kita masih ada sebuah argument yang sudah selesai. Saya rasa saya tidak dapat beri kekongan untuk menggunakan perasaan yang baik sekarang. Okey. Hai. Boleh kita kira-kira menggunakan perasaan yang lebih berlaku? Kerana saya rasa ia berlaku dari satu perasaan yang satu-satunya ke satu-satunya. Ia sangat menarik. Ya. Ya. Saya rasa itu boleh dibuat. Jadi, apa yang anda berkata bergantung dengan perasaan yang berlaku untuk menggunakan perasaan yang baik untuk menggunakan perasaan yang baik, ia mungkin menggunakan perasaan yang baik. Ya. Jadi, untuk perasaan yang baik, saya rasa ia akan membuatkan perasaan yang baik dengan saya rasa saya akan membuatkan. Saya lihat. Saya tidak tahu. Tapi, saya rasa ia lebih berlaku. Ya, itu boleh dibuat. Saya faham perasaan yang lebih berlaku. Ya. Tapi saya juga lihat bahawa ia dapat menggantungkan perasaan yang baik. Ya, anda mempercayai satu perasaan yang baik dan mempercayai perasaan yang baik yang berlaku dengan pembedahan yang berlaku dengan kedua perasaan yang berlaku dengan perasaan yang berlaku. Memak, saya mengatakan gitu. Tapi, seperti yang anda menyebut, jika anda menggunakan perasaan yang baik dan membuat perasaan yang berlaku dengan perasaan yang lain, anda akhirnya tidak mempunyai perasaan yang berlaku sehingga saya menyebabkan untuk meletakkan perasaan yang berlaku. Jadi, dia menyentuh semula ilmu dan mengalami perasaan yang baik. Saya rasa Saya rasa ia menjadikan cara yang ditujukan. Saya bermakna, masalah yang penting adalah, anda dapat membuatkan kemahiran yang sempurna dengan dalam kaki yang berbentuk? Tidak, anda tidak lakukannya. Anda melakukan kemahiran yang berbentuk. Itu sebabnya saya melakukan kemahiran yang berbentuk. Anda ingin melakukan kemahiran yang besar, anda akan berakhir dengan KSB. Ya, jadi ia akan mempunyai beberapa kaki di sekitar? Ya, jadi itu adalah sebuah kata-kata. Untuk membuat kemahiran yang berbentuk, anda dapat menghubungkan kemahiran yang terbentuk di sekitar beberapa kaki yang berbentuk? Ya, itu berlaku dengan beberapa kaki yang berbentuk? Ya, itu berlaku dengan kemahiran yang besar. Ya, itu berlaku dengan kemahiran yang lebih besar. Hai. Jadi, pada akhirnya, anda ada 3 kaki yang berbentuk? Tetapi, 2 kaki yang berbentuk. Ya, anda ada kaki yang belakang berbentuk di wilayah. Dan kemudian ia berbentuk, anda perlukan dia. Paling kata-kata saya mengandungkan kaki dengan kaki yang berbentuk? Ya, anda ada ketua, anda ada ketua, saya perlu berbentuk? Saya tidak boleh berkata-kata. Sejak keadaan industri kita mempunyai perintah dari 30 kek keadaan keadaan untuk membuat peringatan yang tersebut. Tapi saya minta, keadaan keadaan keadaan ini masih bergerak dengan semua mereka. Bagaimana perasaan yang kita mahu mengalami? Saya tidak boleh berkata-kata. Saya rasa ini lebih dari keadaan saya yang mencuba untuk menjadi perasaan yang tersebut. Tapi jika anda minta pilihan antara perasaan, saya akan menggunakan Vue.js untuk lebih mudah. Apabila sesuatu berlaku terlalu besar, saya mungkin akan memikirkan untuk menggunakan Vue. Saya rasa yang kita minta ini...