FEED Validator

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

• line 1, column 38: Use of unknown namespace: http://schemas.google.com/blogger/2008 [help]

  <?xml version='1.0' encoding='UTF-8'?><rss xmlns:atom="http://www.w3.org/200 ...
                                        ^

• line 1, column 38: Unable to validate namespace: http://schemas.google.com/g/2005. See the Google Data specification at https://developers.google.com/gdata/docs/1.0/elements [help]

  <?xml version='1.0' encoding='UTF-8'?><rss xmlns:atom="http://www.w3.org/200 ...
                                        ^

• line 1, column 0: description should not contain trbidi attribute (25 occurrences) [help]

  <?xml version='1.0' encoding='UTF-8'?><rss xmlns:atom="http://www.w3.org/200 ...
  

• line 3, column 0: description should not contain imageanchor attribute (28 occurrences) [help]

  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsE ...
  

• line 3, column 0: description should not contain data-original-height attribute (25 occurrences) [help]

  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsE ...
  

• line 3, column 0: description should not contain data-original-width attribute (25 occurrences) [help]

  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsE ...
  

• line 1065, column 0: description should not contain iframe tag [help]

  <iframe allowfullscreen="" class="YOUTUBE-iframe-video&quo ...
  

• line 1425, column 0: Non-html tag: o:p (11 occurrences) [help]

  is a dynamic, typed, JSON path evaluation on the source document. <o:p&gt ...
  

• line 1765, column 500: Missing atom:link with rel="self" [help]

  ... th="72"/><thr:total>2</thr:total></item></channel></rss>
                                               ^

Source: http://blog.riand.com/feeds/posts/default?alt=rss

1. <?xml version='1.0' encoding='UTF-8'?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/" xmlns:blogger="http://schemas.google.com/blogger/2008" xmlns:georss="http://www.georss.org/georss" xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr="http://purl.org/syndication/thread/1.0" version="2.0"><channel><atom:id>tag:blogger.com,1999:blog-7557605395826374162</atom:id><lastBuildDate>Tue, 05 Mar 2024 10:02:41 +0000</lastBuildDate><category>lwc</category><category>web components</category><title>Elementary, My Dear Watson!</title><description></description><link>http://blog.riand.com/</link><managingEditor>noreply@blogger.com (Philippe Riand)</managingEditor><generator>Blogger</generator><openSearch:totalResults>40</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-7707254757976016113</guid><pubDate>Sun, 15 Mar 2020 20:13:00 +0000</pubDate><atom:updated>2020-03-15T14:09:13.775-07:00</atom:updated><title>LWC: A sample fetch data accessor</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
2. <div class="separator" style="clear: both; text-align: center;">
3. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNnX62gnbtAGMlOjm7u_C2oJqhX7N-P8s6o6ZahrsQ1FsKJWBYRkyibsS0PBZwXdP97Bg2xi4r2EwgAYzytdviDOZ0kSXv3-mhXHop556C13yQ3xjry__aa6F-1rdSn8JeD30zISRyIHI/s1600/fetch-wire.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="287" data-original-width="628" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNnX62gnbtAGMlOjm7u_C2oJqhX7N-P8s6o6ZahrsQ1FsKJWBYRkyibsS0PBZwXdP97Bg2xi4r2EwgAYzytdviDOZ0kSXv3-mhXHop556C13yQ3xjry__aa6F-1rdSn8JeD30zISRyIHI/s320/fetch-wire.png" width="320" /></a></div>
4. <br />
5. What would an LWC application be if it does not fetch data from a server? The browser now made this easy, particularly with the fetch function, or its polyfill for older browsers. The general pattern with LWC/Web Components is to fetch data in <span style="font-family: "courier new" , "courier" , monospace;">connectedCallback()</span>, once the component is added to the DOM. If this can be achieved with simple code, let see how we can make it even easier with wire adapters. In particular, we like to do the following:<br />
6. <ul style="text-align: left;">
7. <li>Have a simple syntax for calling the services.</li>
8. <li>Do not hard code the full URL in the components, so we can easily, and globally, switch the endpoint (dev, staging, prod...), or even mock the server for test purposes. </li>
9. <li>Use URL variable parts, or query parameters.</li>
10. <li>Be able to re-fetch the data when needed, in particular when the variable values change.</li>
11. </ul>
12. The code that illustrates this post is available as part of the LWC essentials: <a href="https://github.com/LWC-Essentials/wire-adapters/tree/master/packages/fetch">https://github.com/LWC-Essentials/wire-adapters/tree/master/packages/fetch</a>. Feel free to check it out and submit enhancements. or suggestions! You can also consume the NPM package <span style="font-family: "courier new" , "courier" , monospace;">@lwce/fetch</span>.<br />
13. <h2 style="text-align: left;">
14. Using the fetch wire adapter </h2>
15. <div style="text-align: left;">
16. The syntax is straightforward:</div>
17. <div style="text-align: left;">
18. <br /></div>
19. <div style="text-align: left;">
20. <span style="font-family: "courier new" , "courier" , monospace;">@wire(useFetch, options) myproperty;</span></div>
21. <br />
22. Let see an an example showing the wire adapter in action. This one calls a user service with query parameters:<br />
23. <br />
24. <span style="font-family: "courier new" , "courier" , monospace;">export default class UserList extends LightningElement {<br />   @track queryParams = {<br />        offset: 0,<br />        limit: 10<br />    }<br />    @wire(useFetch, {<br />        url: '/users',<br />        queryParams: '$queryParams'<br />    }) users;</span><br />
25. <br />
26. When the component is initialized, the fetch request is executed and the <span style="font-family: "courier new" , "courier" , monospace;">users</span> variables get the result.<br />
27. Requests can also be executed explicitly. Obviously, this is useful for update requests, but also for on demand GET requests:<br />
28. <br />
29. <span style="font-family: "courier new" , "courier" , monospace;">export default class Users extends LightningElement {<br />    @track variables = {<br />        userId: 'xyz'<br />    }<br />    @wire(useFetch, {<br />        url: '/users/{userId}',<br />        lazy: true,<br />        variables: '$variables'<br />    }) userById;</span><br />
30. <span style="font-family: "courier new" , "courier" , monospace;"><br />    handleUserClick(event) {<br />        const idx = this._findUserIdx(event);<br />        if(idx!==undefined) {</span><br />
31. <span style="font-family: "courier new" , "courier" , monospace;">            const </span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">userId</span> = </span><span style="font-family: "courier new" , "courier" , monospace;">this.users.data.users[idx].email;</span><br />
32. <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">            </span>this.userById.fetch( {variables:{userId} ).then( ()=>{<br />                alert(JSON.stringify(this.userById.data));<br />            });<br />        }<br />    }</span><br />
33. <br />
34. The result property exposes a <span style="font-family: "courier new" , "courier" , monospace;">fetch()</span> method that can be called programmatically, while the <span style="font-family: "courier new" , "courier" , monospace;">lazy</span> parameter of the wire adapter prevent the automatic execution when the component is initialized.<br />
35. <br />
36. There are several other options, but I don't want to go too much into the use of the adapter, as the <a href="https://github.com/salesforce/lwc-essentials/blob/master/packages/fetch/README.md">README.md</a> file already does that pretty extensively.<br />
37. <br />
38. Let's rather dive into the implementation details. <br />
39. <h2 style="text-align: left;">
40. Implementation details </h2>
41. The fetch wire adapter implementation is fairly straightforward, but there are a few traps that we should be aware of.<br />
42. <h3 style="text-align: left;">
43. Duplicating the result object</h3>
44. The current result object is kept in a variable within the wire adapter closure, and new values are simply assigned to this object before it is sent to the component. This makes it easier from an implementation standpoint, for example setting the invariant values, like the <span style="font-family: "courier new" , "courier" , monospace;">fetchClient</span> instance, or the <span style="font-family: "courier new" , "courier" , monospace;">fetch()</span> method.<br />
45. But has a drawback: the component will only detect a change, and thus redraw, when a new object is sent by the wire adapter. So the object kept by the adapter can't be sent as is to the component. Rather, the <span style="font-family: "courier new" , "courier" , monospace;">update()</span> function duplicates it and send the copy to the component. <br />
46. <h3 style="text-align: left;">
47. Concurrent requests</h3>
48. <div style="text-align: left;">
49. The result from a <span style="font-family: "courier new" , "courier" , monospace;">fetch()</span> call is by definition retrieved asynchronously, which means that we do not control when that result will be available. Moreover, if multiple requests are sent sequentially by the same wire adapter, there is no guarantee that the respective results will come in the same order than the requests were emitted. Imagine a UI featuring a button that triggers a change in the wire adapter. If a user frenziedly clicks that button, it is likely that new requests will be emitted by the wire adapter before the results of the previous ones come back, with no guarantee that the results will be retrieved in order. This is well known issue in JavaScript based UI, generally hard to detect and debug.</div>
50. <div style="text-align: left;">
51. <br /></div>
52. <div style="text-align: left;">
53. Wire adapters, if not designed appropriately, are no exception. I created a code snippet to showcase the issue: <a href="https://developer.salesforce.com/docs/component-library/tools/playground/8peP8wto/12/edit">https://developer.salesforce.com/docs/component-library/tools/playground/8peP8wto/12/edit.</a></div>
54. <div style="text-align: left;">
55. <br /></div>
56. <div style="text-align: left;">
57. Alright, now that we are aware of this issue, here is a set of potential solutions:</div>
58. <ol style="text-align: left;">
59. <li>Prevent a new request from being emitted while one is still pending </li>
60. <li>Ignore the oldest ones when their result comes back and only process the latest one</li>
61. </ol>
62. <div style="text-align: left;">
63. If 1. is easy to implement, it does not provide the best user experience because the UI is frozen until the current request's result comes back. On the other hand, it can also be implement at the application level, for example by disabling the button until the request comes back.</div>
64. <div style="text-align: left;">
65. The fetch wire adapter implements the second one by default. It actually associates a unique index to each request, keeps it in the closure of response handler (<span style="font-family: "courier new" , "courier" , monospace;">fetchIndex</span>), and also globally keeps the index of the latest request (<span style="font-family: "courier new" , "courier" , monospace;">fetchCurrent</span>). When a result comes back, it only processes it if it corresponds to the latest request. All other results are simply ignored.</div>
66. <h2 style="text-align: left;">
67. As a conclusion...</h2>
68. <div style="text-align: left;">
69. Basic wire adapters are easy to implement, while providing a unified way to expose data to component developers. Jump over the fence, and start to create yours! Or extend the one we are providing as part of the <a href="https://github.com/LWC-Essentials/wire-adapters">LWC-Essentials/wire-adapters</a> project. I'd love to grow this repo with your contributions.</div>
70. <div style="text-align: left;">
71. <br /></div>
72. <div style="text-align: left;">
73. <br /></div>
74. </div>
75. </description><link>http://blog.riand.com/2020/03/lwc-sample-fetch-data-accessor.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNnX62gnbtAGMlOjm7u_C2oJqhX7N-P8s6o6ZahrsQ1FsKJWBYRkyibsS0PBZwXdP97Bg2xi4r2EwgAYzytdviDOZ0kSXv3-mhXHop556C13yQ3xjry__aa6F-1rdSn8JeD30zISRyIHI/s72-c/fetch-wire.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-525144314981796537</guid><pubDate>Mon, 10 Feb 2020 17:29:00 +0000</pubDate><atom:updated>2020-03-27T18:34:21.320-07:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">lwc</category><category domain="http://www.blogger.com/atom/ns#">web components</category><title>LWC: Accessing GraphQL data with the Apollo client</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
76. <div>
77. <div class="separator" style="clear: both; text-align: center;">
78. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhk2fL-W25TyMZxr-oeuEL500bzdh1RB2FfdSgsG5UQIRRP-5YSKG8KJbVBohF2A89LhOEdTc8Yba7N2H5U-prRTpYINEi57K96YVC3ylxWZ5hsDCGNwb2g1dwJ6Y3lwd52gUocvSpak/s1600/apollo+client.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="390" data-original-width="967" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhk2fL-W25TyMZxr-oeuEL500bzdh1RB2FfdSgsG5UQIRRP-5YSKG8KJbVBohF2A89LhOEdTc8Yba7N2H5U-prRTpYINEi57K96YVC3ylxWZ5hsDCGNwb2g1dwJ6Y3lwd52gUocvSpak/s320/apollo+client.png" width="320" /></a></div>
79. <br />
80. <br />
81. If you're a front-end developer calling <a href="https://graphql.org/">GraphQL</a> endpoints from your UI, you must have heard about the JavaScript <a href="https://www.apollographql.com/docs/react/">Apollo Client</a> library. This library is a state management library that let developers execute GraphQL queries against GraphQL servers as well as a local store. It handles caching, change notifications and features interesting capabilities like <a href="https://www.apollographql.com/docs/react/performance/optimistic-ui/">optimistic UI</a>.<br />
82. <br />
83. The flagship implementation from the Apollo team is dedicated to React but, fortunately, the implementation is split in two layers:<br />
84. <ul style="text-align: left;">
85. <li>A pure JavaScript <a href="https://www.apollographql.com/docs/react/api/apollo-client/">Apollo Client library</a><br />This library is not related to any client technology. It implements all the necessary plumbing to support GraphQL queries in JavaScript.</li>
86. <li><a href="https://www.apollographql.com/docs/react/integrations/integrations/">View integrations</a><br />Provided on top of the aforementioned library, these integrations make it easier to consume the Apollo client with your technology of choice (React, Angular, Vue, Svelte, Ember, ...). If the React and Angular integrations are done by the Apollo team, the others are provided by third party contributors.</li>
87. </ul>
88. </div>
89. <h2 style="text-align: left;">
90. Integrating LWC</h2>
91. There is a <a href="https://github.com/apollo-elements/apollo-elements">Web Component integration</a> available, which can work with LWC as well. Actually, the LWC adapter code on top of this library would be minimal. On the other hand, it won't take advantage of the LWC specific features, in particular the wire adapters. So the idea is to create a new integration specifically for LWC, leveraging wire adapters similarly to hooks in the React integration.<br />
92. <br />
93. For the impatient, the integration is available here: <a href="https://www.npmjs.com/package/@lwce/apollo-client">apollo-client.</a> It provides a sample application that shows CRUD operations on a server, in memory list of books.<br />
94. <h2 style="text-align: left;">
95. GraphQL Queries</h2>
96. <div style="text-align: left;">
97. A GraphQL query in the React integration uses a hook named <span style="font-family: "courier new" , "courier" , monospace;">useQuery</span>.  Here is an example:</div>
98. <div style="text-align: left;">
99. <br /></div>
100. <span style="font-family: "courier new" , "courier" , monospace;">  const { loading, error, data } = useQuery(MY_QUERY);</span><br />
101. <br />
102. A very similar syntax can be achieved with LWC wire adapters. We even keep the same name, <span style="font-family: "courier new" , "courier" , monospace;">useQuery</span>, for the wire adapter:<br />
103. <br />
104. <span style="font-family: "courier new" , "courier" , monospace;">  @wire(useQuery, { query: MY_QUERY }) results;</span><br />
105. <br />
106. The <span style="font-family: "courier new" , "courier" , monospace;">results</span> property features the following sub properties, similarly to the React hook:<br />
107. <br />
108. <span style="font-family: "courier new" , "courier" , monospace;">  { loading, error, data }</span><br />
109. <br />
110. Any of these sub properties is available at any time, so the component template can display appropriate content, with pseudo code like:<br />
111. <span style="font-family: "courier new" , "courier" , monospace;">  <template if:true={results.loading}></span><br />
112. <span style="font-family: "courier new" , "courier" , monospace;">    <img src="loading.gif"/>Loading...</span> <br />
113. <span style="font-family: "courier new" , "courier" , monospace;">  </template></span><br />
114. <span style="font-family: "courier new" , "courier" , monospace;">  <template if:true={results.error}></span><br />
115. <span style="font-family: "courier new" , "courier" , monospace;">    Man, there is an error {results.error} </span><br />
116. <span style="font-family: "courier new" , "courier" , monospace;">  </template></span><br />
117. <span style="font-family: "courier new" , "courier" , monospace;">  <template if:true={results.data}></span><br />
118. <span style="font-family: "courier new" , "courier" , monospace;">    Here is the data: {results.data} </span><br />
119. <span style="font-family: "courier new" , "courier" , monospace;">  </template></span><br />
120. <br />
121. The <span style="font-family: "courier new" , "courier" , monospace;">results</span> property also features even more sub properties. In particular, it offers a <span style="font-family: "courier new" , "courier" , monospace;">fetch()</span> method that re-fetches the query.<br />
122. <br />
123. Finally, a wire adapter has more options than just the <span style="font-family: "courier new" , "courier" , monospace;">query</span>: it can use a specific Apollo <span style="font-family: "courier new" , "courier" , monospace;">client</span>,  defer the query execution with <span style="font-family: "courier new" , "courier" , monospace;">lazy</span>,  use <span style="font-family: "courier new" , "courier" , monospace;">variables</span> and any other standard options used by the Apollo client <a href="https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.watchQuery"><span style="font-family: "courier new" , "courier" , monospace;">watchQuery()</span></a>.  See <a href="https://github.com/LWC-Essentials/apollo-client/blob/master/packages/apollo-client/README.md">README.md</a> for a more exhaustive list of options and how to use them. <br />
124. <br />
125. Here is a example of a query using variables for pagination, assuming that the query supports <span style="font-family: "courier new" , "courier" , monospace;">offset</span> and <span style="font-family: "courier new" , "courier" , monospace;">limit</span> parameters:<br />
126. <br />
127. <span style="font-family: "courier new" , "courier" , monospace;">  const BOOK_LIST = gql`<br />      query($offset: Int!, $limit: Int!) {<br />          books(offset: $offset, limit: $limit) {<br />            id,<br />            title<br />            author<br />          }<br />      }`;<br />  </span><br />
128. <span style="font-family: "courier new" , "courier" , monospace;">  class Booklist extends LightningElement {<br /><br />    variables = {<br />        offset: 0,<br />        limit: 10<br />    }<br /><br />    @wire(useQuery, {<br />        query: BOOK_LIST,<br />        variables: '$variables'<br />    }) books;</span><br />
129. <br />
130. Here is an example using the lazy mode, which requires a specific call to <span style="font-family: "Courier New", Courier, monospace;">fetch()</span>:<br />
131. <br />
132. <span style="font-family: "Courier New", Courier, monospace;">    @wire(useQuery, {<br />        query: USERS,<br />        lazy: true<br />    }) users;<br /><br />    readUsers() {<br />        this.users.fetch().then( () => {<br />            // Notification that the data has been updated<br />            // Do something with the @wire data member...<br />        })<br />    }</span><br />
133. <br />
134. A more complete example is available in the project <a href="https://github.com/salesforce/lwc-apollo-client/tree/master/packages/sample-app">sample application</a>.<br />
135. <br />
136. Because wire adapters options can only observe changes to root properties, we created the variables property to hold the query variables. Then, when we want to update one of its value (ex: <span style="font-family: "courier new" , "courier" , monospace;">offset</span>), then we have to assign a brand new object to that property:<br />
137. <span style="font-family: "courier new" , "courier" , monospace;">    handleFirst() {<br />        this.variables = {<br />            ...this.variables,<br />            offset: 0<br />        }<br />    }</span><br />
138. <br />
139. Finally, if it is possible to use the query inline, it is better to declare it as a constant (<span style="font-family: "courier new" , "courier" , monospace;">BOOK_LIST</span> in the example). This is because the current wire adapter implementation will repeat that value multiple times in the generated code.<br />
140. <h2 style="text-align: left;">
141. GraphQL Mutations</h2>
142. Mutations are also provided using wire adapters, although they should be executed on demand as opposed to when the component is connected. The wire adapter provides a <span style="font-family: "courier new" , "courier" , monospace;">mutate</span> method that can be called anytime to execute the mutation.<br />
143. <br />
144. Bellow is a simple sample that creates a book:<br />
145. <br />
146. <span style="font-family: "courier new" , "courier" , monospace;">  // Define the mutation query </span><br />
147. <span style="font-family: "courier new" , "courier" , monospace;">  const BOOK_CREATE = gql`<br />    mutation createBook($book: BookInput!) {<br />        createBook(book: $book) {<br />            id<br />            title<br />            author<br />            genre<br />            publisher<br />        }<br />    }<br />  `;</span><br />
148. <br />
149. <span style="font-family: "courier new" , "courier" , monospace;">  // Mutation adapter use in the component class </span><br />
150. <span style="font-family: "courier new" , "courier" , monospace;">  @wire(useMutation, {mutation: BOOK_CREATE}) bookCreate;<br />  onCreateBook() { </span><br />
151. <span style="font-family: "courier new" , "courier" , monospace;">    const variables = {<br />      book: {<br />        title: "A book",<br />        author: "John Doe",<br />        genre: "Novel",<br />        publisher: "MyBook"<br />      }<br />    };<br />    this.bookCreate.mutate({<br />      </span><span style="font-family: "courier new" , "courier" , monospace;">variables</span><br />
152. <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"> </span>   });</span><br />
153. <span style="font-family: "courier new" , "courier" , monospace;">  } </span><br />
154. <br />
155. The sample app coming with the project shows all the CRUD operations on books: Create, Read, Update and Delete.<br />
156. <h2 style="text-align: left;">
157. And What's Next?</h2>
158. Well this project is a first shot. A lot more has to be done, but this is a good start, isn't it? It needs your contributions to be on par with the React implementation. Please feel free to submit your ideas, code or examples.</div>
159. </description><link>http://blog.riand.com/2020/02/lwc-accessing-graphql-data-with-apollo.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhk2fL-W25TyMZxr-oeuEL500bzdh1RB2FfdSgsG5UQIRRP-5YSKG8KJbVBohF2A89LhOEdTc8Yba7N2H5U-prRTpYINEi57K96YVC3ylxWZ5hsDCGNwb2g1dwJ6Y3lwd52gUocvSpak/s72-c/apollo+client.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-5722800711148429507</guid><pubDate>Wed, 05 Feb 2020 18:07:00 +0000</pubDate><atom:updated>2020-02-05T10:07:24.007-08:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">lwc</category><category domain="http://www.blogger.com/atom/ns#">web components</category><title>LWC Reactive State Manager</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
160. <div class="separator" style="clear: both; text-align: center;">
161. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iuIhlBwqO8inkDv33AA1YQ9NAGP9H3o-17dhqF3VtiQZBBcgprIRF4Wou_h6MYBSkzA-yqIrhm3NrplxED9xPx8fVeSp63madAVkcD_1gnvf3SjAv-0cSvtKGBqcFr-DTiR5x0s2rGQ/s1600/reactive-state.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="524" data-original-width="1048" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iuIhlBwqO8inkDv33AA1YQ9NAGP9H3o-17dhqF3VtiQZBBcgprIRF4Wou_h6MYBSkzA-yqIrhm3NrplxED9xPx8fVeSp63madAVkcD_1gnvf3SjAv-0cSvtKGBqcFr-DTiR5x0s2rGQ/s320/reactive-state.png" width="320" /></a></div>
162. <div class="separator" style="clear: both; text-align: center;">
163. <br /></div>
164. <div class="separator" style="clear: both; text-align: center;">
165. </div>
166. <br />
167. If you started to create LWC applications, you might have found that managing the state of a component is trivial, thanks to the reactive properties and the <span style="font-family: "courier new" , "courier" , monospace;">@track</span> decorator. You do not have to deal with a specific state property, or explicitly ask the component to render when its state changed.<br />
168. <br />
169. Now, when your application gets more complex, you often want this state to be shared with other components. This is when state managers, like <a href="https://redux.js.org/">Redux</a> or <a href="https://mobx.js.org/README.html">MobX</a>, come into play. As these libraries are technology agnostic, you can obviously use them with LWC components. To make it easier, you can even create a few helpers, typically wire adapters.<br />
170. <br />
171. But can we create a store manager that is closer to LWC, leveraging the core LWC capabilities to provide global state management?<br />
172. <h2 style="text-align: left;">
173. Towards a Reactive LWC Store</h2>
174. First, the code described bellow is available as a library published here: <a href="https://www.npmjs.com/package/@lwce/store">https://www.npmjs.com/package/@lwce/store</a>. The source code is on Github: <a href="https://github.com/LWC-Essentials/wire-adapters/tree/master/packages/store">https://github.com/LWC-Essentials/wire-adapters/tree/master/packages/store</a>.<br />
175. <br />
176. The idea is simple: we can have a global object, the "store", that holds [key:value] entries. Then, we'll use a wire adapter that lets a component access any entry in the store using a key:<br />
177. <span style="font-family: "courier new" , "courier" , monospace;">  @wire(useStore, {key: 'user'}) user;</span><br />
178. <br />
179. That's it. The user property is "reactive" so any change to its content will be tracked by the component. Multiple components can share the same entry coming from the store, by using the same key.  Even pure JavaScript code can access an entry programmatically:<br />
180. <span style="font-family: "courier new" , "courier" , monospace;">  const u = getEntry('user')</span><br />
181. <br />
182. To make all the entries reactive, we need the global store object, holding all these entries, to be itself reactive. The LWC component reactivity is provided by a specific membrane, called the reactive membrane, which is private to the runtime. The solution is then to create an invisible component that holds the whole store object as a reactive property. This component is silently created when we initialize the store using:<br />
183. <span style="font-family: "courier new" , "courier" , monospace;">  initStore(content?: object)</span><br />
184. <div style="text-align: left;">
185. <br /></div>
186. <div style="text-align: left;">
187. The  content parameter is optional, just in case we want to initialize the store with initial values. It can be useful, for example, when the store is pre-populated from server side rendering results.</div>
188. <h2 style="text-align: left;">
189. Adding Entries to the Store</h2>
190. Accessing a store value using the <span style="font-family: "Courier New", Courier, monospace;">@wire</span> or the API is simple, but how do we add an entry to that store? Well, the answer is straightforward: lazily, when we need it. In other words, an entry is created in the store the first time it is requested by key. And, right after being created, it gets initialized. For this, the developer can register initializers that will be invoked during this step:<br />
191. <span style="font-family: "courier new" , "courier" , monospace;">  registerInitializer(<br />    (key) => {<br />        if(key==='user') {<br />            return {name: 'Doe', first: 'John'};<br />        }<br />        return undefined; // not for this entry<br />    }<br />  );</span><br />
192. <br />
193. If the initialization data is not immediately available, for example because the data comes from a network request, an initializer can return a <span style="font-family: "courier new" , "courier" , monospace;">Promise</span>. The store will consume the value when the promise will be resolved. By the meantime, the consumer can check some boolean values to understand the status of the entry, see bellow. <br />
194. <h2 style="text-align: left;">
195. Rich Entry Content</h2>
196. Entries in the store are actually not just exposing the raw data, but an object with the following properties:<br />
197. <span style="font-family: "courier new" , "courier" , monospace;">  {</span><br />
198. <span style="font-family: "courier new" , "courier" , monospace;">    data: any</span><br />
199. <span style="font-family: "courier new" , "courier" , monospace;">    error: string</span><br />
200. <span style="font-family: "courier new" , "courier" , monospace;">    loading: boolean</span><br />
201. <span style="font-family: "courier new" , "courier" , monospace;">    initialized: boolean</span><br />
202. <span style="font-family: "courier new" , "courier" , monospace;">  }</span><br />
203. <br />
204. So in our example above, the user content have to be accessed through the <span style="font-family: "Courier New", Courier, monospace;">data</span> property:<br />
205. <span style="font-family: "courier new" , "courier" , monospace;">   const u = getEntry('user').data</span><br />
206. <br />
207. Similarly in a component template:<br />
208. <span style="font-family: "courier new" , "courier" , monospace;">  <p>{user.data.firstName} {user.data.lastName}</p> </span><br />
209. <br />
210. Because an entry contains <span style="font-family: "courier new" , "courier" , monospace;">{error, loading, initialized}</span>, a consumer can also check if:<br />
211. <ul style="text-align: left;">
212. <li>An error happened during initialization. <span style="font-family: "Courier New", Courier, monospace;">error</span> will then contain the error message.</li>
213. <li>The data is still being loaded</li>
214. <li>The data has already be initialized once</li>
215. </ul>
216. The difference between <span style="font-family: "courier new" , "courier" , monospace;">loading</span> and <span style="font-family: "courier new" , "courier" , monospace;">initialized</span> is subtle: as a store entry can be reloaded, loading can happen while data has already been loaded once. In that case, the developer can choose to provide a slightly different UI (ex: the previous data is still displayed with a loading icon while the entry is being reloaded).<br />
217. <h2 style="text-align: left;">
218. Putting the Store in Action</h2>
219. <div style="text-align: left;">
220. The sample-app accompanying the library on Github shows a commerce cart built using this library: <a href="https://github.com/LWC-Essentials/wire-adapters/tree/master/packages/sample-app">https://github.com/LWC-Essentials/wire-adapters/tree/master/packages/sample-app</a></div>
221. <div style="text-align: left;">
222. <br /></div>
223. <div style="text-align: left;">
224. All the components (cart, checkout, basket icon) are sharing the same 'cart' store entry. They all update when cart changes:</div>
225. <div style="text-align: left;">
226. <br /></div>
227. <div class="separator" style="clear: both; text-align: center;">
228. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxiFBrvLcte-l63kRqr-CA2QuVqMnfM057NQ25x7cv-3gNshvyn-1x9vIM9caicxEJmhzKBjls4RwvE7GmFkg3ISOgB6US6Fw4KrM_COGM0LUlr2kantZEUrLzk65KKdBIZw6oyPRi04/s1600/store-example.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="444" data-original-width="1109" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxiFBrvLcte-l63kRqr-CA2QuVqMnfM057NQ25x7cv-3gNshvyn-1x9vIM9caicxEJmhzKBjls4RwvE7GmFkg3ISOgB6US6Fw4KrM_COGM0LUlr2kantZEUrLzk65KKdBIZw6oyPRi04/s640/store-example.png" width="640" /></a></div>
229. <div style="text-align: left;">
230. <br /></div>
231. <div style="text-align: left;">
232. As all the store entries are reactive, simply changing some values within the cart makes all the components re-render.</div>
233. <br />
234. <br /></div>
235. </description><link>http://blog.riand.com/2020/02/lwc-reactive-state-manager.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6iuIhlBwqO8inkDv33AA1YQ9NAGP9H3o-17dhqF3VtiQZBBcgprIRF4Wou_h6MYBSkzA-yqIrhm3NrplxED9xPx8fVeSp63madAVkcD_1gnvf3SjAv-0cSvtKGBqcFr-DTiR5x0s2rGQ/s72-c/reactive-state.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-4829046412628380241</guid><pubDate>Fri, 31 Jan 2020 22:02:00 +0000</pubDate><atom:updated>2020-01-31T14:02:37.125-08:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">lwc</category><category domain="http://www.blogger.com/atom/ns#">web components</category><title>LWC Wire Adapters #2 - Producing Data Streams</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
236. <div class="separator" style="clear: both; text-align: center;">
237. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtI8lqNsgR4Jvmk-l9Tac3Ir37mg0cdSmaIuRk3eXpfLClTwCcWf0iOmrKgkQMUXlzHowC4oKpaA1DZxedN7nzpnBiMJi5Tew3RoZzm4QlM5nqLYUI1LSaarjDeH09iocBlCZpwOjMEMg/s1600/wireadapters-providers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="304" data-original-width="745" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtI8lqNsgR4Jvmk-l9Tac3Ir37mg0cdSmaIuRk3eXpfLClTwCcWf0iOmrKgkQMUXlzHowC4oKpaA1DZxedN7nzpnBiMJi5Tew3RoZzm4QlM5nqLYUI1LSaarjDeH09iocBlCZpwOjMEMg/s320/wireadapters-providers.png" width="320" /></a></div>
238. <br />
239. We saw in the previous post that wire adapters are a very elegant and efficient way to consume data streams. Let's see now how we can produce these data streams. If it seems magic, it is actually a pretty easy API.<br />
240. <br />
241. <b>*Disclaimers*</b><br />
242. <b>#1</b> - This post talks about the original wire adapter API, as described <a href="https://github.com/salesforce/lwc-rfcs/blob/master/text/0103-wire-adapters.md">here</a>.  There is an upcoming new implementation that keeps the same consumer interface, but where the provider API is a bit different, see <a href="https://github.com/salesforce/lwc-rfcs/blob/master/text/0000-wire-reform.md">wire-reform</a>. This blog post talks about the former, and will be updated when the later will be released.<br />
243. <b>#2</b> -  Custom wire adapters are currently only available to the Open Source version of <a href="https://lwc.dev/">LWC</a>, not to LWC running in Salesforce Core.<br />
244. <h2 style="text-align: left;">
245. Our First Wire Adapter</h2>
246. To introduce the wire adapter API, let's implement a <span style="font-family: "courier new" , "courier" , monospace;">stopWatch</span> component that behind the scene uses a wire adapter streaming the time elapsed. This wire adapter offers some callbacks to start, stop and reset the timer:<br />
247. <br />
248. <div class="separator" style="clear: both; text-align: center;">
249. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgosr_OzqUknxROnbBcX7eZFT2YbeKVkGzcX0As3T2yRr-eDo0NrKjB0p7RXzXpRnR0K0capdShtGvY2nTnBTOn3G8Cirh1Argxhl0SB2DUooWo8BiYVUv39cl-sO3r6IqnDzv6NC55JBg/s1600/stopwatch.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="129" data-original-width="433" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgosr_OzqUknxROnbBcX7eZFT2YbeKVkGzcX0As3T2yRr-eDo0NrKjB0p7RXzXpRnR0K0capdShtGvY2nTnBTOn3G8Cirh1Argxhl0SB2DUooWo8BiYVUv39cl-sO3r6IqnDzv6NC55JBg/s400/stopwatch.gif" width="400" /></a></div>
250. For the impatient, the source code is provided through the LWC playground:<div style="text-align: left;">
251.    <a href="https://developer.salesforce.com/docs/component-library/tools/playground/8peP8wto/8/edit"> https://developer.salesforce.com/docs/component-library/tools/playground/8peP8wto/8/edit</a> </div>
252. <h2 style="text-align: left;">
253. Wire Adapters Registry</h2>
254. <div style="text-align: left;">
255. LWC maintains a global registry of wire adapters, so each wire adapter has to be registered before it can be consumed by a component. It is uniquely identified by a key, which can be a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a> or a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Function</a>. As a good practice, this key is exported from the wire adapter JavaScript module. The registration is done through the register method:<br />
256. <br />
257. <span style="font-family: "courier new" , "courier" , monospace;">  register(key</span><span style="font-family: "courier new" , "courier" , monospace;">, myAdapterFunction);</span><br />
258. <span style="font-family: "courier new" , "courier" , monospace;"><br /></span>
259. <br />
260. <div style="text-align: left;">
261. The
262. current implementation also requires a global, LWC provided, "wire service" to be registered
263. before any wire adapter can be used. The main file of an application is
264. generally a good place for it.</div>
265. <div style="text-align: left;">
266. <br /></div>
267. <div style="text-align: left;">
268. <span style="font-family: "courier new" , "courier" , monospace;">  import { register } from "lwc";<br />  // The wire service has to be registered once<br />  import { registerWireService } from 'wire-service';<br />  registerWireService(register);</span></div>
269. <br />
270. Note that the example above does not have to do this, as the Playground does it automatically for any code snippet.<br />
271. <h2 style="text-align: left;">
272. Wire Adapter Implementation</h2>
273. </div>
274. <div style="text-align: left;">
275. A wire adapter is defined by a function that is called once when the wire adapter is initialized. It has a unique parameter, <span style="font-family: "courier new" , "courier" , monospace;">eventTarget</span>, which represents the consumer of this wire adapter.<br />
276. <br />
277. To get started, here is how our simple wire adapter skeleton <span style="font-family: "courier new" , "courier" , monospace;">stopWatch</span> looks like:</div>
278. <div style="text-align: left;">
279. <br /></div>
280. <div style="text-align: left;">
281. <span style="font-family: "courier new" , "courier" , monospace;">  // Define the Symbol identifying the wire adapter</span><br />
282. <span style="font-family: "courier new" , "courier" , monospace;">  export const stopWatch = Symbol('</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">stop-watch</span>');</span><br />
283. <span style="font-family: "courier new" , "courier" , monospace;">  </span><br />
284. <span style="font-family: "courier new" , "courier" , monospace;">  // Register the wire adapter implementation<br />  register(</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">stopWatch</span>, eventTarget => {<br />      // wire adapter implementation</span></div>
285. <div style="text-align: left;">
286. <span style="font-family: "courier new" , "courier" , monospace;">      // ...<br />  });</span></div>
287. <div style="text-align: left;">
288. <ul style="text-align: left;">
289. <li><span style="font-family: "courier new" , "courier" , monospace;">stopWatch</span><br />This is the wire adapter key, exported so components can reference it.</li>
290. <li><span style="font-family: "courier new" , "courier" , monospace;">eventTarget</span><br />The context passed by the engine, see bellow.</li>
291. </ul>
292. </div>
293. <h3 style="text-align: left;">
294. Initialization </h3>
295. <div style="text-align: left;">
296. The wire adapter API is event based: it receives notifications when it has to take an action. In fact it can register handlers for the following 3 different events: </div>
297. <ul style="text-align: left;">
298. <li><span style="font-family: "courier new" , "courier" , monospace;">connect</span><br />This event is emitted when the component owning the wire adapter is connected to the DOM. At that time, it is safe for the wire adapter to send data to the component.</li>
299. <li><span style="font-family: "courier new" , "courier" , monospace;">disconnect</span><br />This event is emitted when the component owning the wire adapter is disconnected from the DOM. When the component is disconnected, the wire adapter can cleanup its internal data. For example, if it was observing a data stream, it can disconnect from it. Once a component is disconnected, the wire adapter should no longer send it data, until it connects again.</li>
300. <li><span style="font-family: "courier new" , "courier" , monospace;">config</span><br /> This is emitted once initially, and thereafter when the wire adapter options have different values ("reactive options"). The options value are passed as an argument to the handler.</li>
301. </ul>
302. To handle these events, the wire adapter has to register handlers to the <span style="font-family: "courier new" , "courier" , monospace;">eventTarget</span>:<br />
303. <br />
304. <div style="text-align: left;">
305. <span style="font-family: "courier new" , "courier" , monospace;">  register(stopWatch, eventTarget => {<br /><br />    function handleConfig(options) {</span></div>
306. <div style="text-align: left;">
307. <span style="font-family: "courier new" , "courier" , monospace;">      // Do something with the config<br />    }<br /><br />    function handleConnect() {</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">      </span></span><br />
308. <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">      // The component is connected, send it some values!</span> </span><br />
309. <span style="font-family: "courier new" , "courier" , monospace;">    }<br /><br />    function handleDisconnect() {</span></div>
310. <div style="text-align: left;">
311. <span style="font-family: "courier new" , "courier" , monospace;">      // The component is disconnected, cleanup the adapter<br />    }<br /><br />    // Connect the wire adapter<br />    eventTarget.addEventListener('config', handleConfig);<br />    eventTarget.addEventListener('connect', handleConnect);<br />    eventTarget.addEventListener('disconnect', handleDisconnect);<br />  })</span></div>
312. <div style="text-align: left;">
313. <br />
314. <h3 style="text-align: left;">
315. Sending data to the component</h3>
316. </div>
317. <div style="text-align: left;">
318. Once the wire adapter receives the <span style="font-family: "courier new" , "courier" , monospace;">connect</span> event, it can send data to the component. For this, it dispatches a <span style="font-family: "courier new" , "courier" , monospace;">ValueChangedEvent</span> to the component with the new value as an argument:<br />
319. <br />
320. <span style="font-family: "courier new" , "courier" , monospace;">  const result = ...<br />  eventTarget.dispatchEvent(new ValueChangedEvent(result));</span><br />
321. <br />
322. Once connected, the wire adapter can send new data to the component at anytime. For example, if the component is listening to a websocket, it can update the component when its gets new data from that websocket.<br />
323. <h3 style="text-align: left;">
324. Assembling the pieces </h3>
325. Well, it is assembled in the playground sample code:<br />
326. <ul style="text-align: left;">
327. <li><span style="font-family: "courier new" , "courier" , monospace;">stopwatch.js</span> contains the wire adapter code</li>
328. <li><span style="font-family: "courier new" , "courier" , monospace;">app.js/.html</span> defines the component.</li>
329. </ul>
330. <br />
331. Note: there are 2 differences between this code running within the playground and a potential standalone application:<br />
332. <ol style="text-align: left;">
333. <li>The wire service does not have to be registered, the playground does it</li>
334. <li>The wire adapter in the playground imports <span style="font-family: "courier new" , "courier" , monospace;">wire-service</span>, while it should be <span style="font-family: "courier new" , "courier" , monospace;">@lwc/wire-service</span> in an app using LWC Open Source.</li>
335. </ol>
336. <h3 style="text-align: left;">
337. A few implementation details </h3>
338. The wire adapter uses a configuration option to set the refresh interval. In the example, the value is passed through a reactive property. This makes the <span style="font-family: "Courier New", Courier, monospace;">handleConfig()</span> handler called with a new value when this property changes:<br />
339. <span style="font-family: "Courier New", Courier, monospace;">  @track interval = 50;<br />  @wire(timeWatch,{interval:'$interval'}) stopWatch;</span><br />
340. <br />
341. The data sent by the wire adapter to the component contains both the timer values (hour, mins, ...) as well as some callback functions to interact with the stopwatch adapter. Here is a mock of that object:<br />
342. <span style="font-family: "courier new" , "courier" , monospace;"> {<br />    // Timer values<br />    hour: '00',<br />    mins: '00',<br />    secs: '00',<br />    mils: '000',<br />    // Callback functions<br />    start: function() {...},<br />    stop</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">: function() {...},</span></span><br />
343. <span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;"> </span>   reset</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">: function() {...},</span>  </span><br />
344. <span style="font-family: "courier new" , "courier" , monospace;">}</span><br />
345. <br />
346. To make the wire adapter robust, it maintains a <span style="font-family: "courier new" , "courier" , monospace;">connected</span> flag and only sends data to the component when it this flag is <span style="font-family: "courier new" , "courier" , monospace;">true</span>.</div>
347. <div style="text-align: left;">
348. </div>
349. <div style="text-align: left;">
350. <br /></div>
351. <div style="text-align: left;">
352. This wire adapter implementation creates and sends a copy of the date to the component.  Sending the same object instance multiple times to the component does not make the component to re-render, while a copy does.<br />
353. <br />
354. Finally, wire adapters are simple to implement, aren't they? <br />
355. <br /></div>
356. </div>
357. </description><link>http://blog.riand.com/2020/01/lwc-wire-adapters-2-producing-data.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtI8lqNsgR4Jvmk-l9Tac3Ir37mg0cdSmaIuRk3eXpfLClTwCcWf0iOmrKgkQMUXlzHowC4oKpaA1DZxedN7nzpnBiMJi5Tew3RoZzm4QlM5nqLYUI1LSaarjDeH09iocBlCZpwOjMEMg/s72-c/wireadapters-providers.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-7635303777182617212</guid><pubDate>Fri, 17 Jan 2020 17:07:00 +0000</pubDate><atom:updated>2020-01-17T09:08:25.188-08:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">lwc</category><category domain="http://www.blogger.com/atom/ns#">web components</category><title>LWC Wire Adapters #1 - Consuming Data Streams</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
358. <div class="separator" style="clear: both; text-align: center;">
359. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgRXqF1DOOWqyhtdIHlZwt8h9jNUqAebCXO6Ah7p9ni3sIAi-131hTsYot-hS9UjsmUKSSgEsHp1GumaV0uvSayDz-0RoixTQleDwz6cOPuk7YoVL6vwUTgKgvKpZyJI5mFBD0nPEtAk/s1600/wireadapters-consumers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="304" data-original-width="745" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgRXqF1DOOWqyhtdIHlZwt8h9jNUqAebCXO6Ah7p9ni3sIAi-131hTsYot-hS9UjsmUKSSgEsHp1GumaV0uvSayDz-0RoixTQleDwz6cOPuk7YoVL6vwUTgKgvKpZyJI5mFBD0nPEtAk/s320/wireadapters-consumers.png" width="320" /></a></div>
360. <br />
361. The previous post talked about LWC reactivity using membranes, which re-render the components when the tracked data is changed, like bellow:<br />
362. <br />
363. <span style="font-family: "courier new" , "courier" , monospace;">class MyComponent extends LightningElement {</span><br />
364. <span style="font-family: "courier new" , "courier" , monospace;">  @track value;</span><br />
365. <span style="font-family: "courier new" , "courier" , monospace;">} </span><br />
366. <br />
367. But how does the data get to the component property, <span style="font-family: "courier new" , "courier" , monospace;">value</span> in the example above? It can come from an external data source like a REST service, and it might even update over time. Think about a stream of data feeding the component with new values when they become available.<br />
368. <br />
369. Part of the standard web component <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">lifecycle</a>, the <span style="font-family: "courier new" , "courier" , monospace;">connectedCallback()</span> method is called when the component is added to a document connected element. In short, when the custom element is added to the DOM of your page. At that time, it has access to the DOM element with its attributes, so it can call a service using these values. This is the recommended way for developers to connect the component with data sources.<br />
370. <br />
371. LWC goes further than that, as it makes it simpler, thanks to the "wire adapters". Technically, a wire adapter is a data provider that streams data to a component. The notion of stream is important: it is not only a one time data retrieval, like a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>, but the data can be continuously updated and the component notified. For the JS experts, it is much like an <a href="https://rxjs-dev.firebaseapp.com/">RxJS</a> <a href="https://www.stackchief.com/tutorials/JavaScript%20Observables%20in%205%20Minutes">Observable</a>. <br />
372. <h2 style="text-align: left;">
373. Wire Adapters from a Consumer Standpoint</h2>
374. Wire adapters are objects instantiated using the <span style="font-family: "courier new" , "courier" , monospace;">@wire</span> decorator. This decorator uses two parameters:<br />
375. <ul style="text-align: left;">
376. <li>The wire adapter key, that uniquely identifies the adapter to use </li>
377. <li>A set of options, specific to the wire adapter implementation</li>
378. </ul>
379. Let's use a fictitious wire adapter to access a list of books. With the use of a parameter, this wire adapter can even filter the books based on the author. Assigning a list of books to a component property is done with the following syntax:<br />
380. <br />
381. <span style="font-family: "courier new" , "courier" , monospace;">  class Books extends LightningElement {</span><br />
382. <span style="font-family: "courier new" , "courier" , monospace;">    @wire(BookProvider, {author: 'Mark Twain'}) bookList; </span><br />
383. <span style="font-family: "courier new" , "courier" , monospace;">  }  </span><br />
384. <ul style="text-align: left;">
385. <li><span style="font-family: "courier new" , "courier" , monospace;">BookProvider</span> is the wire adapter key. It is generally a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>, exported by the module defining the wire adapter. </li>
386. <li><span style="font-family: "courier new" , "courier" , monospace;">{author: 'Mark Twain'}</span> is the set of options passed to the wire adapter.  This wire adapter only handles one, which is the author filter.</li>
387. </ul>
388. When the component is added to the DOM, the wire adapter is connected and executed. Obviously, it will retrieve a list of books and assign it to <span style="font-family: "courier new" , "courier" , monospace;">bookList</span>. The result can be assigned synchronously or asynchronously, depending on the wire adapter implementation. With the later, the component should not assume that the data is available right away, but it can come later.<br />
389. <br />
390. What the <span style="font-family: "courier new" , "courier" , monospace;">bookList</span> variable contains is up to the wire adapter: it can be  raw data, like an array of books, of it can be a richer structure giving more information <span style="font-family: "courier new" , "courier" , monospace;">{data,error,loading, ...}</span>. The later is a good practice. It allows, for example, the component to display an icon while the data is loading asynchronously. Moreover, the property content is not limited to values, but can also contain any kind of JS objects, including callback functions (ex: <span style="font-family: "courier new" , "courier" , monospace;">reload()</span>, <span style="font-family: "courier new" , "courier" , monospace;">fetchMore()</span>, ...). Again, it is up to the wire adapter to define the shape of the data being assigned to the property. <br />
391. <br />
392. The wired properties are automatically reactive, similarly to properties decorated with <span style="font-family: "courier new" , "courier" , monospace;">@track</span>.<br />
393. <h2 style="text-align: left;">
394. Dynamic Wire Adapters </h2>
395. The wire adapter options can be dynamic. Let's, for example, filter the book list using an author passed as an attribute to the component. This way, we can use the same component multiple times while displaying different lists:<br />
396. <br />
397. <span style="font-family: "courier new" , "courier" , monospace;">  <my-books author='Mark Twain'></span><br />
398. <span style="font-family: "courier new" , "courier" , monospace;">  <my-books author='Stephen King'></span><br />
399. <br />
400. Our <span style="font-family: "courier new" , "courier" , monospace;">Books</span> component becomes:<br />
401. <br />
402. <span style="font-family: "courier new" , "courier" , monospace;">  class Books extends LightningElement {</span><br />
403. <span style="font-family: "courier new" , "courier" , monospace;">    @api author; </span><br />
404. <span style="font-family: "courier new" , "courier" , monospace;">    @wire(BookProvider, {author: '$author'}) bookList; </span><br />
405. <span style="font-family: "courier new" , "courier" , monospace;">  }  </span><br />
406. <br />
407. The <span style="font-family: "courier new" , "courier" , monospace;">@api</span> decorator in LWC means that the 'author' property is <a href="https://developer.salesforce.com/docs/component-library/documentation/lwc/js_props_public">public</a>: it can be set through an attribute in the markup, or programmatically from outside of the component. The <span style="font-family: "courier new" , "courier" , monospace;">$author</span> value is an LWC convention: it means that the component's <span style="font-family: "courier new" , "courier" , monospace;">author</span> property value should be used instead of a static string value. Note that this only applies to root values. Options like <span style="font-family: "courier new" , "courier" , monospace;">{user: {name:'$name'}}</span> will not be recognized as a reference to a property value, because <span style="font-family: "courier new" , "courier" , monospace;">name</span> is not a root property.<br />
408. <h2 style="text-align: left;">
409. Advanced Wire Adapters</h2>
410. If the value provided by a wire adapter can be assigned to a component property, it can also be streamed to a component method. In this case, the value is passed to the method as an argument.<br />
411. Let's assume, as an example, that we want to split a book properties into different component tracked properties, we can do something like:<br />
412. <br />
413. <span style="font-family: "courier new" , "courier" , monospace;">  class Books extends LightningElement {</span><br />
414. <span style="font-family: "courier new" , "courier" , monospace;">    @track title;</span><br />
415. <span style="font-family: "courier new" , "courier" , monospace;">    </span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">@track </span>author; </span><br />
416. <span style="font-family: "courier new" , "courier" , monospace;">    @wire(BookByISBN, {ISBN: 'xxxxx'}) book(</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">value</span>) {</span><br />
417. <span style="font-family: "courier new" , "courier" , monospace;">      this.title = value.title;</span><span style="font-family: "courier new" , "courier" , monospace;">      this.</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">author </span> = value.author; </span><br />
418. <span style="font-family: "courier new" , "courier" , monospace;">    }; </span><br />
419. <span style="font-family: "courier new" , "courier" , monospace;">  }  </span><br />
420. <br />
421. Of course, the code of such a method can do a lot more, like calculation, sending updates, ...<br />
422. <h2 style="text-align: left;">
423. Imperative Access </h2>
424. To be complete, the wire adapter key can be either a Symbol or a Function. When it is a function (a "callable"), it means that it can be called by code, simply by calling that function with parameters. If the parameters could match the wire adapter options, this is not a requirement. Also, the returned value is adapter specific: it can be anything, and does not have to be a Promise. This is reserved to very specific use cases.<br />
425. <br />
426. <br />
427. <br />
428. The journey continues. Now that we know how to consume a wire adapter, let's figure out how to build one. That will be the topic of the next post.</div>
429. </description><link>http://blog.riand.com/2020/01/lwc-wire-adapters-1-consuming-data.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXgRXqF1DOOWqyhtdIHlZwt8h9jNUqAebCXO6Ah7p9ni3sIAi-131hTsYot-hS9UjsmUKSSgEsHp1GumaV0uvSayDz-0RoixTQleDwz6cOPuk7YoVL6vwUTgKgvKpZyJI5mFBD0nPEtAk/s72-c/wireadapters-consumers.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-3160025878112141983</guid><pubDate>Mon, 13 Jan 2020 13:37:00 +0000</pubDate><atom:updated>2020-01-29T08:41:13.414-08:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">lwc</category><category domain="http://www.blogger.com/atom/ns#">web components</category><title>LWC Reactivity Using Membranes</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
430. <div class="separator" style="clear: both; text-align: center;">
431. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDp2FRijfxpvpuqTSXZw7gaz2xTYajsN3trFZwJ3Fz-ng91xkgJ19VNePHyMDhYwdZYxcHNf_dBu-YXQiYxKF9vbY1cmExN6G8OajJgiQF4qwcqvntj-duY0b-j1xvSxKvJcph5tZGWw/s1600/membrane_main.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="506" data-original-width="1204" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDp2FRijfxpvpuqTSXZw7gaz2xTYajsN3trFZwJ3Fz-ng91xkgJ19VNePHyMDhYwdZYxcHNf_dBu-YXQiYxKF9vbY1cmExN6G8OajJgiQF4qwcqvntj-duY0b-j1xvSxKvJcph5tZGWw/s320/membrane_main.png" width="320" /></a></div>
432. <br />
433. LWC allows you to create reactive components that automatically update their UI when they get new data, or when existing data is modified. At the heart of this reactive capability is the implementation of a pattern called "membrane". Let's dive into that pattern and how it powers LWC.<br />
434. <h2 style="text-align: left;">
435. What is a membrane</h2>
436. <div style="text-align: left;">
437. Basically a membrane is a thin layer between the consumer of an object and that object. In other words, a membrane exposes consumer facing proxies for any existing object. From a consumer standpoint, accessing the object through the proxy is indistinguisable from intereacting directly with the object. But the membrane can execute business logic ("hooks") whenever the consumer interacts with the object. It can track property access (read/write), method calls, properties enumeration and so on... It can also hide some content to the consumer, or even distort existing content (e.g. change the values being returned). It is a very powerful pattern used for many different purposes, from content isolation to change tracking.<br />
438. <div class="separator" style="clear: both; text-align: center;">
439. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OqfZYX9Z3YGla46zQqg_VCIA7GKQ1VYPaJ2MD5gWIVfCtjz9oIbZgsQ5Fe7EcUHgKAw9WkGsFG2IL3qOoX6G9f2uBVBcU6r2mJXtzoykh4b_UVWN-5FJ0CkWhWVAV3mp63uWhsRXBlc/s1600/membrane_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="604" data-original-width="1014" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OqfZYX9Z3YGla46zQqg_VCIA7GKQ1VYPaJ2MD5gWIVfCtjz9oIbZgsQ5Fe7EcUHgKAw9WkGsFG2IL3qOoX6G9f2uBVBcU6r2mJXtzoykh4b_UVWN-5FJ0CkWhWVAV3mp63uWhsRXBlc/s400/membrane_1.png" width="400" /></a></div>
440. </div>
441. <div style="text-align: left;">
442. <br /></div>
443. <div style="text-align: left;">
444. Another important point with a membrane is that any object accessed through a proxy is automatically proxied by the membrane as well. Let's note a proxied object <span style="font-family: "courier new" , "courier" , monospace;">X</span> as <span style="font-family: "courier new" , "courier" , monospace;">P(X)</span>.<br />
445. If <span style="font-family: "courier new" , "courier" , monospace;">A</span> has a property <span style="font-family: "courier new" , "courier" , monospace;">b</span> of type <span style="font-family: "courier new" , "courier" , monospace;">B</span>, then <span style="font-family: "courier new" , "courier" , monospace;">A.b</span> returns a object of type <span style="font-family: "courier new" , "courier" , monospace;">B</span>. But <span style="font-family: "courier new" , "courier" , monospace;">P(A).b </span>returns <span style="font-family: "courier new" , "courier" , monospace;">P(B)</span>. The membrane hooked the access to the property <span style="font-family: "courier new" , "courier" , monospace;">b</span> and distorted the result to return a proxy object for <span style="font-family: "courier new" , "courier" , monospace;">b</span>. This is obviously transparent to the consumer:</div>
446. <div style="text-align: left;">
447. <div class="separator" style="clear: both; text-align: center;">
448. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipV2XTojW1gAdDIeKEXAJLjV_ZfQu9Hj5ZEPn5oh5fGW4pwDvLisn8-hgl-mHRh47ciIEwCltDYf-SD5tG4HssmP5nZpS7tZjlI2YV_uHPOGGDcm7Hmhu36PqEvSevy5jX8CvgfKdLI00/s1600/membrane_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="564" data-original-width="954" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipV2XTojW1gAdDIeKEXAJLjV_ZfQu9Hj5ZEPn5oh5fGW4pwDvLisn8-hgl-mHRh47ciIEwCltDYf-SD5tG4HssmP5nZpS7tZjlI2YV_uHPOGGDcm7Hmhu36PqEvSevy5jX8CvgfKdLI00/s400/membrane_2.png" width="400" /></a></div>
449. Because of this, if one starts from a proxied root object and only access the graph from this root object, then it guarantees that all the objects accessed are proxies, and are thus managed by the membrane.<br />
450. <br />
451. Finally, membranes have another important property: there is a one to one relationship between an object and its proxy for a given membrane. It means that the same <span style="font-family: "courier new" , "courier" , monospace;">P(A)</span> object is returned for a given object <span style="font-family: "courier new" , "courier" , monospace;">A</span>, regardless how it is retrieved. Suppose, for example, that a component has list of child components and a reference to its parent. The equality bellow is true:<br />
452. <span style="font-family: "courier new" , "courier" , monospace;">         comp.children[0].parent === comp</span> <br />
453. That equality is preserved with proxies as well:<br />
454. <span style="font-family: "courier new" , "courier" , monospace;">         P(comp).children[0].parent === P(comp)</span><br />
455. More detailed information on membranes can be found here: <a href="https://tvcutsem.github.io/membranes">membrane</a>.</div>
456. <h2 style="text-align: left;">
457. Salesforce Membrane Implementation</h2>
458. <div style="text-align: left;">
459. As said earlier, LWC is using membranes to implement reactivity. But, instead of coding membranes within LWC, Salesforce created a separate general purpose, open source library called <a href="https://github.com/salesforce/observable-membrane">observable-membrane</a>. Like other JavaScript implementations, it is based on top of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxy API</a>.</div>
460. <div style="text-align: left;">
461. <br /></div>
462. <div style="text-align: left;">
463. With this library, a developer can create a membrane and proxy objects with the simple code bellow:</div>
464. <div style="text-align: left;">
465. <span style="font-family: "courier new" , "courier" , monospace;">  const membrane = new ObservableMembrane();<br />  ...<br />  const o = membrane.getProxy(o); </span></div>
466. <div style="text-align: left;">
467. <br /></div>
468. <div style="text-align: left;">
469. The <span style="font-family: "courier new" , "courier" , monospace;">membrane</span> object holds a set of functions called when a caller interacts with a proxied object. Thus, the <span style="font-family: "courier new" , "courier" , monospace;">membrane</span> can track when a value is read/updated and eventually distort that value. In short, the <span style="font-family: "courier new" , "courier" , monospace;">ObservableMembrane</span> knows about any property access/change in the graph starting from any proxied object, obtained by calling <span style="font-family: "courier new" , "courier" , monospace;">getProxy()</span>.</div>
470. <h2 style="text-align: left;">
471. LWC and Membrane </h2>
472. <div style="text-align: left;">
473. This is where it becomes interesting: if a <span style="font-family: "courier new" , "courier" , monospace;">membrane</span> can track any change in an object graph, it means that it can re-render a component when it detects a change in the data graph it consumes. This is exactly what the <span style="font-family: "courier new" , "courier" , monospace;">@track</span> property decorator is for:</div>
474. <div style="text-align: left;">
475. <br /></div>
476. <div style="text-align: left;">
477. <span style="font-family: "courier new" , "courier" , monospace;">  class Banner extends LightningElement {</span></div>
478. <span style="font-family: "courier new" , "courier" , monospace;">      @track user</span><br />
479. <div style="text-align: left;">
480. <span style="font-family: "courier new" , "courier" , monospace;">  }</span></div>
481. <div style="text-align: left;">
482. <br /></div>
483. <div style="text-align: left;">
484. This decorator ensures that any value assigned to the decorated property is actually proxied using the <span style="font-family: "courier new" , "courier" , monospace;">reactiveMembrane</span>. Typically, assigning a value to a tracked property like:</div>
485. <div style="text-align: left;">
486. <span style="font-family: "courier new" , "courier" , monospace;">  this.user={ name: 'Paul', ...}</span></div>
487. <div style="text-align: left;">
488. is internally equivalent to:</div>
489. <div style="text-align: left;">
490. <span style="font-family: "courier new" , "courier" , monospace;">  this.user=reactiveMembrane.getProxy({</span><span style="font-family: "courier new" , "courier" , monospace;"><span style="font-family: "courier new" , "courier" , monospace;">name: 'Paul', </span>...})</span>.</div>
491. <div style="text-align: left;">
492. <br /></div>
493. <div style="text-align: left;">
494. <span style="font-family: "courier new" , "courier" , monospace;">reactiveMembrane</span> is a singleton, defined in the LWC engine library. It tracks the value changes in any object it created proxies for, find the components impacted by the changes and re-render them when necessary.  For example, if a component has a onclick event handler like bellow:</div>
495. <div style="text-align: left;">
496. <span style="font-family: "courier new" , "courier" , monospace;">  handleClick() {</span></div>
497. <div style="text-align: left;">
498. <span style="font-family: "courier new" , "courier" , monospace;">    this.user.name = 'Bob';</span></div>
499. <div style="text-align: left;">
500. <span style="font-family: "courier new" , "courier" , monospace;">  } </span></div>
501. <div style="text-align: left;">
502. The user name change is detected by the <span style="font-family: "courier new" , "courier" , monospace;">reactiveMembrane</span> and the component is re-rendered without any further work from the developer.<br />
503. <br />
504. Note that the re-rendering does not happen synchronously when the change is detected. The component is internally tagged as 'dirty' and the rendering will happen later. Thus, sequentially changing multiple tracked values for a component only triggers a single re-rendering.</div>
505. <div style="text-align: left;">
506. <br /></div>
507. <div style="text-align: left;">
508. Multiple components can track changes of the same object. Fortunately, every component will be updated when a change happens to this object, regardless where and how it was updated.<br />
509. <br />
510. Finally, all the fields in a component are reactive. Adding <a href="https://lwc.dev/guide/reference#%40track">@track</a> to a component property is only needed for values you'd like to track deeper, like objects or array, not for basic strings, numbers or booleans.</div>
511. <h2 style="text-align: left;">
512. Conclusion</h2>
513. The use of membranes within LWC makes it very easy to track changes and react when they happen. The developers don't have to care about notifying the system when some data is changed, it is "magic". From an implementation standpoint, the use of the Proxy API also makes it very efficient at runtime.<br />
514. <br />
515. But wait: it reveals all its power when coupled with other LWC technologies. Let's explore that in the next post!<br />
516. <br /></div>
517. </description><link>http://blog.riand.com/2020/01/lwc-reactivity-using-membranes.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDp2FRijfxpvpuqTSXZw7gaz2xTYajsN3trFZwJ3Fz-ng91xkgJ19VNePHyMDhYwdZYxcHNf_dBu-YXQiYxKF9vbY1cmExN6G8OajJgiQF4qwcqvntj-duY0b-j1xvSxKvJcph5tZGWw/s72-c/membrane_main.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-3604885788907635470</guid><pubDate>Wed, 08 Jan 2020 17:57:00 +0000</pubDate><atom:updated>2020-01-15T08:05:35.255-08:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">lwc</category><category domain="http://www.blogger.com/atom/ns#">web components</category><title>Introducing LWC - Lightning Web Components</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
518. <div class="separator" style="clear: both; text-align: center;">
519. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEO8NSoALEEPzbmMuYi9jGQEJAnuqctB6_0bkaMuvlunrTu40O4aZYTPd4nHJ7nCNV7Ww2kwSU1E1H87Bb7aoYrfuaxRxNVfO3m6YjSSi-4t8176uPStOohQpxdq7CxBrqqvvZFvnd1g/s1600/lightning-web-components.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="803" data-original-width="1600" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEO8NSoALEEPzbmMuYi9jGQEJAnuqctB6_0bkaMuvlunrTu40O4aZYTPd4nHJ7nCNV7Ww2kwSU1E1H87Bb7aoYrfuaxRxNVfO3m6YjSSi-4t8176uPStOohQpxdq7CxBrqqvvZFvnd1g/s320/lightning-web-components.png" width="320" /></a></div>
520. <div class="separator" style="clear: both; text-align: center;">
521. </div>
522. <br />
523. <br />
524. In the previous <a href="https://blog.riand.com/2020/01/the-rise-of-web-components.html">post</a>, I talked about Web Components in general. But Salesforce released at <a href="https://www.salesforce.com/company/news-press/press-releases/2019/05/192915-e/">TrailheadDX 2019</a> a new open source technology called Lightning Web Components, aka <a href="https://lwc.dev/">LWC</a>. Basically, LWC is a set of tools, including a compiler, a runtime engine, some build utilities that you can use to create both reusable components and applications.<br />
525. <h2 style="text-align: left;">
526. Why a tool for creating Web Components?</h2>
527. Actually, Web Components are defined through a set of new browser specifications, so they don't require any framework. There are many examples showing how to create such reusable components just using the bare APIs!<br />
528. <br />
529. If this is correct, you'll quickly find out that these APIs are very low level. As a result, creating an even moderately complex component requires a bunch of boilerplate code: you need to maintain the synchronization between HTML attributes and JavaScript properties, you need to keep the DOM up-to-date on data changes, ... and many other boring stuff!<br />
530. <br />
531. That's the reason why several technologies appeared in the past years: they provide you an easier experience with Web Components. They are kind of lightweight frameworks on top of the Web Components APIs. They are often called "invisible" frameworks as, once the components are created, the technology used to create the components is not apparent. As a consumer of the components, you don't really care what has been used behind the scene to create them.<br />
532. <h2 style="text-align: left;">
533. What does LWC bring on the table?</h2>
534. <div style="text-align: left;">
535. <b>Enterprise ready</b> </div>
536. <div style="text-align: left;">
537. LWC is an enterprise ready technology, designed to support Salesforce business in the long term. When I think about it, I can find a lot of similarities between <a href="https://www.salesforce.com/">Salesforce</a> and <a href="https://en.wikipedia.org/wiki/Lotus_Software">Lotus/IBM</a>: my latest <a href="https://en.wikipedia.org/wiki/IBM_Notes">Notes</a> client can still execute applications from the '90, and so Salesforce can execute apps built with older releases (or seamlessly convert them). Such a backward compatibility is critical for businesses! It is even more emphasized with cloud architectures, as the customers are upgraded automatically without the choice to stay on an older release. From an LWC standpoint, it means that every feature added to the tool will have to be supported "forever" and thus is carefully evaluated with a risk assessment. Any new feature has to go through an RFC, see: <a href="https://github.com/salesforce/lwc-rfcs">lwc-rfcs</a>. </div>
538. <br />
539. <div style="text-align: left;">
540. <b>ES6+/Typescript</b></div>
541. <div style="text-align: left;">
542. We are in 2020 now, I can't see myself back using ES5 and JQuery. I believe you're on the same boat! LWC eases the use of ES6+, making your code future proof even when staging features like <a href="https://tc39.es/proposal-decorators/">decorators</a> are involved. It is using <a href="https://babeljs.io/">Babel</a> behind the scene, for which <a href="https://engineering.salesforce.com/">Salesforce Engineering</a> is a proud sponsor.</div>
543. <div style="text-align: left;">
544. <br /></div>
545. <div style="text-align: left;">
546. <b>Browser support </b></div>
547. <div style="text-align: left;">
548. If the latest "evergreen" browsers natively support the Web Components specification, older browsers should  use polyfills and/or the compiler should generate specific code for these browsers. LWC does a bit of both, including some tailored polyfills to achieve performance goals. <a href="https://www.npmjs.com/package/@lwc/synthetic-shadow">@lwc/synthetic-shadow</a> is a good example of such a polyfill.</div>
549. <div style="text-align: left;">
550. <br /></div>
551. <div style="text-align: left;">
552. <b>Templating</b></div>
553. <div style="text-align: left;">
554. LWC provides a template engine that renders markup from an HTML template. Somehow, it is similar to <a href="https://lit-html.polymer-project.org/guide">lit-html</a>, except that it is compiled to Javascript at build time, for a faster execution. In that respect, it is similar to the <a href="https://babeljs.io/docs/en/babel-plugin-transform-react-jsx">JSX compiler</a>.</div>
555. <div style="text-align: left;">
556. <br /></div>
557. <div style="text-align: left;">
558. <b>Reactivity</b></div>
559. <div style="text-align: left;">
560. If the template syntax supports one-way data binding, the component reactivity comes from <a href="https://github.com/salesforce/observable-membrane">observable-membrane</a>, which is another Salesforce open source project. In a nutshell, it allows objects to be observed for changes. Typically, Components are redrawn when at least one of their properties is changed (can be the root property, or another object referenced by that property).</div>
561. <div style="text-align: left;">
562. <br /></div>
563. <div style="text-align: left;">
564. <b>Data Binding</b></div>
565. <div style="text-align: left;">
566. Associated with the above membrane is the notion of wire adapters. Basically, a wire adapter streams data to a component and makes it re-render when needed. It can be used similarly to <a href="https://reactjs.org/docs/hooks-intro.html">React hooks</a>. More information here: <a href="https://github.com/salesforce/lwc-rfcs/blob/master/text/0103-wire-adapters.md">wire adapters,</a> superseded by the <a href="https://github.com/salesforce/lwc-rfcs/blob/master/text/0000-wire-reform.md">wire-reform.</a></div>
567. <div style="text-align: left;">
568. <br /></div>
569. <div style="text-align: left;">
570. <b>Performance</b> </div>
571. <div style="text-align: left;">
572. Performance is a key characteristic of LWC. It is constantly, and deeply, tuned to provide the best client side performance.</div>
573. <div style="text-align: left;">
574. <br /></div>
575. <b>Static analysis</b><br />
576. For advanced users, the LWC compiler can be used to extract meta-data from the components. For example, a plugin could extract the data sources being accessed and generate some initialization code.<br />
577. <div style="text-align: left;">
578. <br /></div>
579. <div style="text-align: left;">
580. And several others, like matching attribute and properties, ...: a set of goodies that makes your life easier as a developer! </div>
581. <h2 style="text-align: left;">
582. The flavors of LWC</h2>
583. <div style="text-align: left;">
584. Well, if there is one LWC technology, there are two deployments:</div>
585. <ul style="text-align: left;">
586. <li>Salesforce platform<br />The Salesforce platform handles many things for free, like the LWC compilation, so you don't have to manage rollup/webpack builds, nor you have to maintain package.json. On the other hand, it runs within the constraints of the Salesforce platform, including <a href="https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_code.htm">Locker</a> and other differences.</li>
587. <li>Open source, aka LWC OSS (<a href="https://github.com/salesforce/lwc">Github</a>)<br />LWC can be used similarly to any other Javascript technology. To get started, you can use the nice <a href="https://github.com/muenzpraeger/create-lwc-app">lwc-create-app</a> tools from <a href="https://twitter.com/muenzpraeger?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Rene Winkelmeyer (</a><a href="https://twitter.com/muenzpraeger">@muenzpraeger</a><a href="https://twitter.com/muenzpraeger?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">)</a>, that some of you know from our prior IBM life.<br />This is LWC unleashed!</li>
588. </ul>
589. The differences are detailed <a href="https://developer.salesforce.com/blogs/2019/06/differences-between-building-lightning-web-components-on-lightning-platform-and-open-source.html">here</a>, thanks again to Rene.<br />
590. <ul style="text-align: left;">
591. </ul>
592. <h2 style="text-align: left;">
593. And what next?</h2>
594. <div style="text-align: left;">
595. Now that I introduced the LWC technology (I hope it got you hooked!), it is time to get our hands dirty. I'm not going to provide any tutorial or getting started document because they already exist. I'll rather focus on some specific aspect of Web Components and LWC.</div>
596. <div style="text-align: left;">
597. <br /></div>
598. <div style="text-align: left;">
599. By the meantime, you can get started here: <a href="https://developer.salesforce.com/docs/component-library/documentation/lwc">Introducing Lightning Web Components</a> or here: <a href="https://lwc.dev/">lwc.dev.</a><br />
600. <br /></div>
601. </div>
602. </description><link>http://blog.riand.com/2020/01/introducing-lwc-lightning-web-components.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEO8NSoALEEPzbmMuYi9jGQEJAnuqctB6_0bkaMuvlunrTu40O4aZYTPd4nHJ7nCNV7Ww2kwSU1E1H87Bb7aoYrfuaxRxNVfO3m6YjSSi-4t8176uPStOohQpxdq7CxBrqqvvZFvnd1g/s72-c/lightning-web-components.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-3704689864711678915</guid><pubDate>Sat, 04 Jan 2020 20:41:00 +0000</pubDate><atom:updated>2020-01-04T12:41:26.878-08:00</atom:updated><category domain="http://www.blogger.com/atom/ns#">lwc</category><category domain="http://www.blogger.com/atom/ns#">web components</category><title>The rise of Web Components</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
603. <div class="separator" style="clear: both; text-align: center;">
604. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmF8b6Tmj3P6oG06A6XdmLHR7HpFDMguKU2z8WF6QPSJei0l5bmlymGqx2dTyIoYoSbliBtm3cRTMgcd2czglHJvOuRi_FYyr5LMhxKLyTk93xGdSdeKZbJPbLaph7D0o1mwvpRFWyEdM/s1600/webcomponents.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="192" data-original-width="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmF8b6Tmj3P6oG06A6XdmLHR7HpFDMguKU2z8WF6QPSJei0l5bmlymGqx2dTyIoYoSbliBtm3cRTMgcd2czglHJvOuRi_FYyr5LMhxKLyTk93xGdSdeKZbJPbLaph7D0o1mwvpRFWyEdM/s1600/webcomponents.jpg" /></a></div>
605. <br />
606. It is now been a while since people started to talk about <a href="https://en.wikipedia.org/wiki/Web_Components" target="_blank">Web Components</a>. But it finally became a reality. As of the beginning of 2020, all the major browsers implement most of the specification. Moreover, the need to support some of the ancient browsers, like the older IEs, is <a href="https://gs.statcounter.com/browser-market-share">drastically decreasing</a>. Fortunately, there are  <a href="https://www.webcomponents.org/polyfills" target="_blank">polyfills</a> to still support IE11 and other not too old generation. So what are web components and should you use them?<br />
607. <h2 style="text-align: left;">
608. Web Components</h2>
609. <h2 style="text-align: left;">
610. </h2>
611. <div style="text-align: left;">
612. Web Components is actually a generic term that encompasses several different specifications:</div>
613. <ul style="text-align: left;">
614. <li>Custom Elements<br />Define new HTML element types (e.g. new HTML tags). They are easily identifiable from the stock HTML elements as their name must include an hyphen '-'. <br />Support: <a href="https://caniuse.com/#feat=custom-elementsv1">https://caniuse.com/#feat=custom-elementsv1</a></li>
615. <li>Shadow DOM<br />Encapsulates the markup and the styles of a component. Basically, the shadow DOM isolates the implementation of your component from the rest of the page.<br />Support: <a href="https://caniuse.com/#feat=shadowdomv1">https://caniuse.com/#feat=shadowdomv1</a></li>
616. <li>ES6 modules<br />As Web Components heavily rely on JavaScript, ES6 modules define a elegant way to load JavaScript code within the browser.<br />Support: <a href="https://caniuse.com/#feat=es6-module">https://caniuse.com/#feat=es6-module</a></li>
617. <li>HTML template<br />Used to define fragments of markup that are not rendered by the page, but can be reused later in particular from JavaScript.<br />Support: <a href="https://caniuse.com/#feat=template">https://caniuse.com/#feat=template</a></li>
618. </ul>
619. Here is a great introduction to these specifications: <a href="https://www.webcomponents.org/introduction">https://www.webcomponents.org/introduction</a><br />
620. <br />
621. <div style="text-align: left;">
622. Not that the idea of natively extending the HTML markup and isolating components is not new. There is prior art, like <a href="https://en.wikipedia.org/wiki/HTML_Components" target="_blank">Microsoft HTC</a> or <a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL" target="_blank">Mozilla XUL</a>. Web Components, instead of being vendor specific, are part of the W3C specification and work similarly on every browser following that spec.</div>
623. <h2 style="text-align: left;">
624. Web components vs Frameworks</h2>
625. Let's put it this way: they do not compete, they rather complement each other. The Web Components specification provides native behaviors implementation, thus helping the frameworks to be simpler and lightweight. On the other hand, the frameworks make it easier to write Web Components. If you were brave enough to write a web component manually, then you know what I'm talking about. What would take a few lines of React code could lead to hundreds using the bare Web Components APIs.<br />
626. <br />
627. The Web Components specification is an evolving one, that still has gaps to fill. But it reached a state where it provides real value in term of performance and browser compatibility.  <br />
628. <h2 style="text-align: left;">
629. How to write Web Components</h2>
630. Ok, let's forget about solely using the raw browser APIs, but let's get help from Frameworks, as they handle a lots of things for us (data binding, event handlers, ...).<br />
631. <br />
632. Even though existing frameworks came before the Web Components specification, they all have ways to create and consume custom elements. On the other hand, they generally do not (yet?) properly handle advanced capabilities like Shadow DOM:<br />
633. <ul style="text-align: left;">
634. <li><a href="https://reactjs.org/" target="_blank">React</a><br />React Components are actually fairly different from Web Components. That being said, a React application can both consume custom elements and expose its components as custom elements, see: <a href="https://reactjs.org/docs/web-components.html">https://reactjs.org/docs/web-components.html</a>. </li>
635. <li><a href="https://angular.io/" target="_blank">Angular</a><br />Angular, if not built on top of the Web Components specification, is actually closer than React. The Angular team came with <a href="https://angular.io/guide/elements" target="_blank">Angular Elements</a>, which let's you package your components as custom elements.</li>
636. <li><a href="https://vuejs.org/">Vue.JS</a><br />Similarly, Vue has its own library to expose custom element: <a href="https://github.com/vuejs/vue-web-component-wrapper" target="_blank">@vue/web-component-wrapper.</a></li>
637. </ul>
638. If using these well known technologies feels appealing, they come with some caveats/limitations when it is about Web Components: the component models have different life cycles, they carry more code than necessary, the features are not matching 1-1...<br />
639. <ul style="text-align: left;">
640. </ul>
641. Fortunately a new generation of frameworks, based on top of the Web Components specification, appeared. Will they replace the legacy ones is a good question. It won't certainly happen soon, although they make it easier and more efficient when leveraging Web Components.<br />
642. Part of these frameworks are:<br />
643. <ul style="text-align: left;">
644. <li><a href="https://lwc.dev/">Lighning Web Components (LWC)</a><br />This is one of the latest, but promising framework brought by <a href="https://www.salesforce.com/">Salesforce</a>. Ok, my judgment is certainly biased because I'm a Salesforce employee, and because we are using this technology on a daily basis. But trust me, it deserves a look :-) Most of my upcoming posts going further will be around on that technology!</li>
645. <li><a href="https://stenciljs.com/">Stencil.JS</a><br />This technology is developed by the <a href="https://ionicframework.com/">Ionic</a> team, basically to fulfill their own needs. In short, the first Ionic release was Angular based and they got many requests for both a React and a Vue version. So they decided to standardize on a common Web Components implementation and then wrap them within each of these framework. </li>
646. <li><a href="https://www.polymer-project.org/">Polymer</a><br />That's one of the original frameworks brought by Google. It evolved a lot in the past 5 years, following the browser implementations, finally making it an efficient framework for writing Web Components. Finally, instead of the initial large monolithic framework, it now provides several projects like <a href="https://lit-element.polymer-project.org/">LitElement</a> or <a href="https://lit-html.polymer-project.org/">lit-html.</a></li>
647. <li><a href="https://svelte.dev/">Svelte</a><br />Svelte is an efficient <a href="https://svelte.dev/blog/svelte-3-rethinking-reactivity">reactive</a> library, oriented towards performance. It brings some innovation, particularly with the drop of the virtual DOM. Its community development model is very interesting, with an impressive list of involved people.</li>
648. <li>And many more!<br /><a href="http://./">Hybrids</a>, <a href="https://slimjs.com/#/getting-started">Slim.JS</a>, <a href="https://bosonic.github.io/" target="_blank">Bosonic,</a> <a href="https://riot.js.org/">Riot.JS</a>, <a href="https://en.wikipedia.org/wiki/JQWidgets#Smart_HTML_Elements">Smart HTML Elements</a>... And yes, I'm missing some, in particular the ones that do not yet exist. </li>
649. </ul>
650. Choosing one framework or the other can be matter of preferences, skills or actual framework capabilities. But we should not forget a non negligible aspect, which is the sustainability of the technology:<br />
651. <ul style="text-align: left;">
652. <li>Will the technology remain compatible over time?</li>
653. <li>How will it adapt to the new standards?</li>
654. <li>Who is behind it? Is it another open source project that will loose attention& love in a foreseeable future?</li>
655. <li>What is the community? </li>
656. </ul>
657. These are fair questions that we need to answer before we choose a technology for business purposes. Of course, your mileage may vary.<br /><br /></div>
658. </description><link>http://blog.riand.com/2020/01/the-rise-of-web-components.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmF8b6Tmj3P6oG06A6XdmLHR7HpFDMguKU2z8WF6QPSJei0l5bmlymGqx2dTyIoYoSbliBtm3cRTMgcd2czglHJvOuRi_FYyr5LMhxKLyTk93xGdSdeKZbJPbLaph7D0o1mwvpRFWyEdM/s72-c/webcomponents.jpg" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-8449612503091481358</guid><pubDate>Mon, 03 Sep 2018 14:42:00 +0000</pubDate><atom:updated>2018-09-03T07:42:07.280-07:00</atom:updated><title>Give a new life to your old Android devices</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
659. As many mobile developers, I own a fair amount of devices that now start to show their age. They are still ok from an hardware standpoint, but Android is stuck at a 5 yrs old version. In particular, I own a few Samsung tablets (SM-T520, SM-T900...) blocked at 4.4 or 5.1. Samsung is really not good at upgrading their devices which is a shame. Yeah, I don't like Apple a lot, but my venerable iPad is smoothly running the latest iOS.<br />
660. <br />
661. I took the labor day week-end opportunity to see if there is a way to upgrade these devices. <a href="https://en.wikipedia.org/wiki/CyanogenMod" target="_blank">Cyanogenmod</a> is now gone, but the team started <a href="https://lineageos.org/" target="_blank">LineageOS</a>, which is an up-to-date Android distribution based on the former one. The T-520 being 4.4, I decided to give it a try as I have almost nothing to loose. I also found that we can always recover from a bricked device by downloading the original ROM from Samsung. Ok, let's take the risk!<br />
662. <br />
663. I used the instructions from here: <a href="https://wiki.lineageos.org/devices/n2awifi">https://wiki.lineageos.org/devices/n2awifi</a>. There are good so there is no need for me to repeat them, but just throw in a few findings:<br />
664. <br />
665. 1- I started using a Windows 10 machine, but it always failed installing the <a href="https://glassechidna.com.au/heimdall/#downloads" target="_blank">Heimdall</a> driver. I made different attempts, got different errors until I gave up. Maybe because I already had several Android related drivers installed on that machine? On the other hand, I did the same using my Macbook and it worked like a charm! Conclusion: use a a Mac, my friend!<br />
666. <br />
667. 2- The link to download TWRP is broken. I finally found mine here: <a href="https://dl.twrp.me/picassowifi/">https://dl.twrp.me/picassowifi/</a>. The name of the device was different as n2awifi became picassowifi.<br />
668. <br />
669. 3- Have an SD card ready on the device so you can copy the OS images on /sdcard. Not sure if it works with the main storage, as all the instructions refer to /sdcard.<br />
670. <br />
671. 4- The recovery UI is a bit tricky. To get the Google Apps installed, you have to flash them at the same time than the OS, before you even boot to LineageOS. If you don't do that, they will be unstable. The Android initial setup process is different with or without the Google apps, I tried both :-)<br />
672. When you flash the OS, first add the LineageOS image then, before flashing, click 'Add a new File' and select the GApps files for you architecture. They will be installed in order.<br />
673. <br />
674. 5- I got multiple crashes while flashing the OS. Yes this is scary, but the tablet crashed and rebooted during that operation at different flashing steps. It happened to me 4 times before it finally completed successfully. Also, after a crash, the special reboot key sequence (home+volume up/down) did not always worked. Try to shutdown the tablet often restart it it, without offefing the opportunity to enter the recovery mode. Be patient, try as many times as needed, and you're eventually get there.<br />
675. <br />
676. The tablet is now working Android 7.1 smoothy, with all the apps I need. I have not seen any issue so far. I have not tried 8 yet as it is <a href="https://download.lineageos.org/n2awifi" target="_blank">not officially supported</a> (you can find the ROM anyway if you're adventurous). Maybe my next jump will be Lineage 16 (Android 9). I'll try that with the SM-T900!<br />
677. <br />
678. LineageOS is a great way to revitalize your own devices, or buy some old but good enough hardware and upgrade the software version. The SM-T520 has a great 10.1 bright screen (2560x1600) at nowadays a cheap price!<br />
679. <br />
680. <div class="separator" style="clear: both; text-align: center;">
681. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-gCKe_PP1LVkFCLMrJPQs7WsJIXco3tW2bjdNgnqoqhZ0ihsFBBdzBecxs-nuL5mj_e0UJmFgNlZb9ZbjmljErTqvAEQ6mmlOYKKzbNx3ohxoIjTekYyfgI7ndWUX_xtdlTWzgKCiXs/s1600/lineageos-15.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="581" data-original-width="854" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-gCKe_PP1LVkFCLMrJPQs7WsJIXco3tW2bjdNgnqoqhZ0ihsFBBdzBecxs-nuL5mj_e0UJmFgNlZb9ZbjmljErTqvAEQ6mmlOYKKzbNx3ohxoIjTekYyfgI7ndWUX_xtdlTWzgKCiXs/s320/lineageos-15.webp" width="320" /></a></div>
682. <br /></div>
683. </description><link>http://blog.riand.com/2018/09/give-new-life-to-your-old-android.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-gCKe_PP1LVkFCLMrJPQs7WsJIXco3tW2bjdNgnqoqhZ0ihsFBBdzBecxs-nuL5mj_e0UJmFgNlZb9ZbjmljErTqvAEQ6mmlOYKKzbNx3ohxoIjTekYyfgI7ndWUX_xtdlTWzgKCiXs/s72-c/lineageos-15.webp" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-8679579691808715808</guid><pubDate>Wed, 17 Jan 2018 16:10:00 +0000</pubDate><atom:updated>2018-01-17T08:10:34.143-08:00</atom:updated><title>Darwino makes OpenNTF mobile!</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
684. <div>
685. <div class="separator" style="clear: both; text-align: center;">
686. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrv6AKICvneLyMYlbFoqA9JnS8-9PzQtq8IKEXHkVxcjwo6XM1DxL1D2fAtIZ86AuIWhO5B3R80B6wS00VTx9jb-JWMNRSHOIpfFDXlz6kiLeY19MHD_1vEiFACoW5CDkea-P30Rwl5Xw/s1600/screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="464" data-original-width="456" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrv6AKICvneLyMYlbFoqA9JnS8-9PzQtq8IKEXHkVxcjwo6XM1DxL1D2fAtIZ86AuIWhO5B3R80B6wS00VTx9jb-JWMNRSHOIpfFDXlz6kiLeY19MHD_1vEiFACoW5CDkea-P30Rwl5Xw/s320/screenshot.png" width="314" /></a></div>
687. <div class="separator" style="clear: both; text-align: center;">
688. <br /></div>
689. <div class="separator" style="clear: both; text-align: center;">
690. <a href="https://play.google.com/store/apps/details?id=com.darwino.domino.client.app"><img border="0" data-original-height="50" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSeZcc9yTdXBehtxGijAn4DQ_M_bIxQHCnJ2KdxGVz2OQzr1zWKTS9EcJpL1CTUdAu7LXhfMaDv3vNU_2fR4AZKhUtp_84uiAVbZB4P5g_jINGl8_m90gj8qODlVwObtaSKj_yBODKes/s1600/google-play-store.png" />
691. </a>
692. <a href="https://play.google.com/store/apps/details?id=com.darwino.domino.client.app" style="display: none;">
693. <img border="0" data-original-height="50" data-original-width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1kyELr4w4qQcSC5LnhTlj2CUISODs883d-oCGaK-RlyWo8TVwLBXPusSHG6uykGyeoO3LYzD9y6I-jkxsz_isF_FLR0I4dXOin99Kj4WBvEOnE2KphEcp8zsLUcxDgLvTrAlEYroewig/s1600/apple-app-store.png" /></a>
694. </div>
695. <div class="separator" style="clear: both; text-align: center;">
696. <br /></div>
697. <div class="separator" style="clear: both; text-align: left;">
698. <i><b>[Latest News] The iOS app works perfectly, but we are struggling with the great fruity company to get it accepted to the store, because they claim there is not enough mobile content on OpenNTF... We'll do our best with the OpenNTF team to get more content leveraging mobile capabilities.</b></i></div>
699. <br />
700. <b>Darwino 2.0</b> features a mobile micro application architecture well integrated with the IBM Domino server. It can render any existing Domino web application (classic & XPages) on a mobile device while taking care of the painful details:</div>
701. <div>
702. <ul style="text-align: left;">
703. <li>Real mobile applications available from both Google Play and Apple Store</li>
704. <li>Authentication management, to avoid prompting the user when the server requires credentials</li>
705. <li>Opening external pages in a separate browser window to provide the best user experience</li>
706. <li>Mobile notifications, to alert users when something new arrived and let him/her act appropriately</li>
707. <li>Plus many implementation details, like error management and recovery</li>
708. </ul>
709. </div>
710. <div>
711. To quickly experiment with the capability, we are providing a generic mobile client that one can use to connect to any Darwino enabled Domino server. This client is available on both application stores and is fully configurable to point to any server. As a default configuration, we make it point to OpenNTF!<br />
712. <br /></div>
713. As most of you know, the main OpenNTF applications, like <a href="http://collaborationtoday.info/home.xsp?filter=all" target="_blank">Collaboration Today</a>, are XPages based with a responsive design. This make them very easy to integrate with the micro application architecture. Moreover, Darwino extends Domino Designer with a new design element to detect database changes and send mobile notifications. With that in place on the OpenNTF servers, we are able to send new notifications when a new entry is available in Collaboration Today. By the way, these notifications use the mobile first IBM Cloud service (a.k.a. Bluemix).<br />
714. <div>
715. <br /></div>
716. <div>
717. The implementation on the OpenNTF server was straight forward:</div>
718. <div>
719. <ul style="text-align: left;">
720. <li>Get the Darwino OSGi runtime installed</li>
721. <li>Set some configuration properties</li>
722. <li>Create a new design element for mobile notifications. To leave the existing databases untouched, we did that in brand new, separate database</li>
723. </ul>
724. </div>
725. <div>
726. <div>
727. Voila, in less than an hour it can be all setup. The same can happen to your own applications!</div>
728. <div>
729. <div>
730. <br /></div>
731. <div>
732. What are the next steps then? Well, a few things:</div>
733. <div>
734. <ul style="text-align: left;">
735. <li>We need to work with the OpenNTF team to mobile enable other parts of the site. Ideally, the whole site should be mobile enabled!</li>
736. <li>Why not white labeling the generic client with a pure OpenNTF branding (icon, title, ...)? Darwino offers this options.</li>
737. <li>Move forward and create Darwino single page applications, using web or mobile native technologies, to get the data offline and provide the best user experience without connectivity!</li>
738. </ul>
739. Stay tuned, OpenNTF becomes mobile!<br />
740. <ul style="text-align: left;">
741. </ul>
742. </div>
743. </div>
744. </div>
745. <div class="separator" style="clear: both; text-align: center;">
746. <br /></div>
747. <div>
748. <br /></div>
749. </div>
750. </description><link>http://blog.riand.com/2018/01/darwino-makes-openntf-mobile.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrv6AKICvneLyMYlbFoqA9JnS8-9PzQtq8IKEXHkVxcjwo6XM1DxL1D2fAtIZ86AuIWhO5B3R80B6wS00VTx9jb-JWMNRSHOIpfFDXlz6kiLeY19MHD_1vEiFACoW5CDkea-P30Rwl5Xw/s72-c/screenshot.png" height="72" width="72"/><thr:total>3</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-7405653292475992649</guid><pubDate>Tue, 09 Jan 2018 18:46:00 +0000</pubDate><atom:updated>2018-01-09T10:46:10.526-08:00</atom:updated><title>Dynamic document based security</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
751. Domino provides document based security through the use of readers and authors fields. This is a great capability that is fairly unique in the NoSQL industry heavily used by Domino developer. One caveat though: you have to explicitly manage the list of users/group/roles in each document, generally based on the document state or content. How many times did you write an agent (background task) to update these fields nightly?<br />
752. <br />
753. Since the beginning, Darwino supports readers and authors (as well as excluded readers and authors to remove specific users from the authorized list). It is implemented by a hook in the SQL generator that systematically adds a condition to the queries. Here is how it looks like in pseudo SQL:<br />
754. <blockquote class="tr_bq">
755. <span style="font-family: "courier new" , "courier" , monospace;">SELECT D.JSON FROM DOC D WHERE (....) AND (D.READERS IN (:userid, :userroles, :usergroups...)</span></blockquote>
756. <br />
757. <span style="font-family: Courier New, Courier, monospace;">userid</span>, <span style="font-family: Courier New, Courier, monospace;">userroles</span> and <span style="font-family: Courier New, Courier, monospace;">usergroups</span> are values related to the user making the request.<br />
758. All of this is implemented (and by the way optimized) at the core Darwino level. So it applies regardless of API you use: Java, JavaScript, REST services, GraphQL...<br />
759. <br />
760. But in 2.1, it goes beyond this simple capability: it allows an application to insert its own SQL filter:<br />
761. <blockquote class="tr_bq">
762. <span style="font-family: "courier new" , "courier" , monospace;">SELECT D.JSON FROM DOC D WHERE (....) AND (<custom condition>)</span></blockquote>
763. <br />
764. For example, the custom condition can be based on fields within the document. Let's suppose that the current user object has an attribute '<span style="font-family: "courier new" , "courier" , monospace;">country</span>' set in LDAP. Let's also suppose that the documents in a JSON store also have a field name '<span style="font-family: "courier new" , "courier" , monospace;">country</span>'. From a security standpoint, we only want to allow the users to see the documents tagged with their country. With classic readers fields, you'll need an agent that periodically updates the document readers, or use groups and assign users to groups. In both cases, there is some maintenance to do.<br />
765. <br />
766. With Darwino, it becomes as easy as implementing a runtime extension that returns a condition for the current user (again, simplified pseudo code):<br />
767. <br />
768. <span style="font-family: "courier new" , "courier" , monospace;">String getDynamicSecurity() {<br />    User u = getCurrentUser();<br />    return "{country: '"+u.getCountryAttribute()+"'}";</span><br />
769. <span style="font-family: "courier new" , "courier" , monospace;">}</span><br />
770. <br />
771. There is no need to maintain a list of readers here. If a user is moved to a different country, then the query will use the latest user country (or any other needed value), immediately!<br />
772. <br />
773. The dynamic security condition can be expressed using the built-in, MongoDB like, query language as above. This platform independent query is transpiled to SQL by the core Darwino code.<br />
774. But it can also be expressed as raw SQL, allowing the filter to be as complex as desired. For example, it can lookup in another SQL table, view or stored procedure for a list of authorized ids for the current user:<br />
775. <blockquote class="tr_bq">
776. <span style="font-family: "courier new" , "courier" , monospace;">... AND (D.DOCID IN SELECT ID FROM SECURITY SEC WHERE SEC.USERID='currentuserid')</span></blockquote>
777. This is limitless. Let's suppose that you have a users database where each user document has the name of its manager. Now suppose that user documents can only be accessed by the user and his managers. Well, just get the list of authorized IDs from a recursive SELECT statement<br />
778. <blockquote class="tr_bq">
779. <span style="font-family: "courier new" , "courier" , monospace;">... AND (D.USERID IN WITH RECURSIVE SELECT ...)</span></blockquote>
780. If the subquery becomes too complex and leads to performance issues, you can create materialized views that will be managed by the database server.<br />
781. <br />
782. Come on MongoDB, you cannot compete against the power of relational databases :-)<br />
783. <br />
784. <br />
785. <br />
786. <div class="separator" style="clear: both; text-align: center;">
787. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3RhyphenhypheneRf5yFBmoL_D4qV5320xUXndsR-9ebsxu8ZKlOTK5dT0H1qdRQTZbIMIPA5OoJ63H5_dPdbwfkHiAxK5oWPg3DL2jkbxzg0byUbjpPtEZNeW36HbnGWSe0KPTVwTEwr-u4MDhKVw/s1600/document-lock.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="256" data-original-width="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3RhyphenhypheneRf5yFBmoL_D4qV5320xUXndsR-9ebsxu8ZKlOTK5dT0H1qdRQTZbIMIPA5OoJ63H5_dPdbwfkHiAxK5oWPg3DL2jkbxzg0byUbjpPtEZNeW36HbnGWSe0KPTVwTEwr-u4MDhKVw/s1600/document-lock.png" /></a></div>
788. <br /></div>
789. </description><link>http://blog.riand.com/2018/01/dynamic-document-based-security.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3RhyphenhypheneRf5yFBmoL_D4qV5320xUXndsR-9ebsxu8ZKlOTK5dT0H1qdRQTZbIMIPA5OoJ63H5_dPdbwfkHiAxK5oWPg3DL2jkbxzg0byUbjpPtEZNeW36HbnGWSe0KPTVwTEwr-u4MDhKVw/s72-c/document-lock.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-1557572243689491955</guid><pubDate>Thu, 04 Jan 2018 17:24:00 +0000</pubDate><atom:updated>2018-01-04T09:24:31.360-08:00</atom:updated><title>Offline your data with React-Native applications</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
790. <div class="separator" style="clear: both; text-align: center;">
791. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQHImtwWMtQznUT1xUoE-BB8loZbXkhn63dnOZ_oJVqIydLIvjn1jzvqz_PUO2DATHGH9B_mRLfmgoy6OnHnh9MY1oLYZU3VfqEmmyz_R9qMz0v3Kv46_kLrw7z-isbU-SJf6bvyrJkp0/s1600/react-native.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="369" data-original-width="404" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQHImtwWMtQznUT1xUoE-BB8loZbXkhn63dnOZ_oJVqIydLIvjn1jzvqz_PUO2DATHGH9B_mRLfmgoy6OnHnh9MY1oLYZU3VfqEmmyz_R9qMz0v3Kv46_kLrw7z-isbU-SJf6bvyrJkp0/s200/react-native.png" width="200" /></a></div>
792. <br />
793. In a previous post, I mentioned how we are leveraging ReactJS to create state-of-the-art web applications. We are now moving a step forward by also leveraging its sister technology, React-Native, to create portable, yet native, mobile applications. With all the benefits of Darwino, which includes a local JSON store that replicates for the best offline experience, and all the other services provided by Darwino!<br />
794. <br />
795. To make this as easy as possible, we are providing a simple service based API, that can be called from any native language (Java, Objective-C, Swift).<br />
796. <br />
797. <b>1- Darwino service API</b><br />
798. <b><br /></b>
799. The API is basically made of one class, exposed bellow in pseudo code:<br />
800. <br />
801. <span style="font-family: "courier new" , "courier" , monospace;">class DarwinoApis {</span><br />
802. <span style="font-family: "courier new" , "courier" , monospace;">  ...</span><br />
803. <span style="font-family: "courier new" , "courier" , monospace;">  Object fetch(url, params, headers, content)</span><br />
804. <span style="font-family: "courier new" , "courier" , monospace;">  ...</span><br />
805. <span style="font-family: "courier new" , "courier" , monospace;">}</span><br />
806. <br />
807. The <span style="font-family: Courier New, Courier, monospace;">fetch</span> method calls the service identified by the URL and associated parameters, and returns the result. Behind the hood, such the API call will be either translated to a remote HTTP service call (online mode), or to a local API call (offline mode). This is done transparently by a dispatcher, so the developer does not have to worry about the current mode. It just works! This API can be called from *any* native application, regardless of the library/framework it uses.<br />
808. <br />
809. This shows the beauty of the Darwino architecture: the services are all written independently from the HTTP stack, and thus can be executed locally without the need of HTTP calls. It makes them truly available offline, while providing the best possible performance as it also avoids the data serialization/deserialization needed by the HTTP transport.<br />
810. <br />
811. Here is a basic architecture picture:<br />
812. <br />
813. <div class="separator" style="clear: both; text-align: center;">
814. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsrzFdHaw1JAe3UEjzovpNSHvgX92r8FTUPhO2YXEAfC6RvpPTDDVa7NLiBeQk9hEY5bGadr8Q5CYltUNv8ABOkNuks5oG75-iWBn3whvMJtslq6fUv6sPd2VTp8v-0KSA8TRLnuIKeZw/s1600/mobile+architecture.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="480" data-original-width="449" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsrzFdHaw1JAe3UEjzovpNSHvgX92r8FTUPhO2YXEAfC6RvpPTDDVa7NLiBeQk9hEY5bGadr8Q5CYltUNv8ABOkNuks5oG75-iWBn3whvMJtslq6fUv6sPd2VTp8v-0KSA8TRLnuIKeZw/s320/mobile+architecture.png" width="299" /></a></div>
815. <br />
816. <br />
817. <b>2- ReactNative integration</b><br />
818. <br />
819. As the API is exposed using the platform native languages, it is easy to bridge it with ReactNative. Moreover, the bridge enforces the use of <span style="font-family: Courier New, Courier, monospace;">promises</span>, thus enabling the new <span style="font-family: "courier new" , "courier" , monospace;">aync</span> & <span style="font-family: "courier new" , "courier" , monospace;">await</span> capability for the best developer experience.<br />
820. <br />
821. Here is, for example, how to retrieve the number of documents from a database, regardless if it is local or remote:<br />
822. <br />
823. <div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; white-space: pre;">
824. <span style="color: #569cd6;">async</span> <span style="color: #dcdcaa;">databaseCount</span>() {
825.     <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">url</span> = [<span style="color: #ce9178;">"$darwino-jstore"</span>,<span style="color: #ce9178;">"databases"</span>,<span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">getDatabase</span>(),<span style="color: #ce9178;">"documentscount"</span>]
826.     <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">count</span> = <span style="color: #c586c0;">await</span> <span style="color: #9cdcfe;">darwinoApis</span>.<span style="color: #dcdcaa;">fetch</span>(<span style="color: #9cdcfe;">url</span>);
827.     <span style="color: #569cd6; font-family: "menlo" , "monaco" , "courier new" , monospace;">this</span><span style="color: #d4d4d4; font-family: "menlo" , "monaco" , "courier new" , monospace;">.</span><span style="color: #dcdcaa; font-family: "menlo" , "monaco" , "courier new" , monospace;">println</span>(<span style="color: #ce9178;">"This database contains {0}</span><span style="color: #ce9178;"> documents"</span><span style="color: #d4d4d4; font-family: "menlo" , "monaco" , "courier new" , monospace;">,</span><span style="color: #9cdcfe; font-family: "menlo" , "monaco" , "courier new" , monospace;">count</span>);<br />
828. }</div>
829. Easy, isn't it?<br />
830. <br />
831. Triggering the database replication isn't more difficult, see:<br />
832. <br />
833. <div style="background-color: #1e1e1e; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; white-space: pre;">
834. <span style="color: #569cd6;">let</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;"> = </span><span style="color: #c586c0;">await</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">apis</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">replicate</span><span style="color: #d4d4d4;">(</span><span style="color: #569cd6;">this</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">getDatabase</span><span style="color: #d4d4d4;">(),</span><span style="color: #9cdcfe;">options</span><span style="color: #d4d4d4;">);
835. </span><span style="color: #569cd6;">this</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">println</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"{0}"</span><span style="color: #d4d4d4;">,</span><span style="color: #9cdcfe;">result</span><span style="color: #d4d4d4;">);</span></div>
836. <b><br /></b>
837. <b>3- Darwino API distribution</b><br />
838. <br />
839. The APIs is provided as a library to be added to any existing application. On Android, it is a maven artifact that you can reference from your gradle build file. On iOS, it is a Cocoa framework that you can add to your XCode project. Just add these dependencies and you're ready to go!<br />
840. <br />
841. Android:<br />
842. <div class="separator" style="clear: both; text-align: left;">
843. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eYcSHG7M3ezzUuO3aPH9vF25VYDZpv0HSOb9MPdsBPPNOjdpj5R9BPNZ2sowWtSU0t2r7b7-Kt5wGtVcUJGjL3JXZ2AO6LSkNLGBA4D6Fkxs_rWTFZJ2aOybTeXvmSBMY_M6QlUPdiE/s1600/demomac-android.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="148" data-original-width="626" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eYcSHG7M3ezzUuO3aPH9vF25VYDZpv0HSOb9MPdsBPPNOjdpj5R9BPNZ2sowWtSU0t2r7b7-Kt5wGtVcUJGjL3JXZ2AO6LSkNLGBA4D6Fkxs_rWTFZJ2aOybTeXvmSBMY_M6QlUPdiE/s1600/demomac-android.png" /></a></div>
844. <div class="separator" style="clear: both; text-align: center;">
845. <br /></div>
846. <div class="separator" style="clear: both; text-align: left;">
847. iOS:</div>
848. <div class="separator" style="clear: both; text-align: center;">
849. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkc19CzTLYcNeW2Q63p0UjBD6v-mb5S5mtLj2TSNSOUN4yeHFZ-vJUNbAKhQ1QKfKLxQ1UuzMB9leUf8YWw8OwDtuSidHBxivi4FrG_tvPM5A9ZkVxcNN1Iz2HpcQ9mbN5Fah6lD4Axyo/s1600/demomac-ios.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="146" data-original-width="563" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkc19CzTLYcNeW2Q63p0UjBD6v-mb5S5mtLj2TSNSOUN4yeHFZ-vJUNbAKhQ1QKfKLxQ1UuzMB9leUf8YWw8OwDtuSidHBxivi4FrG_tvPM5A9ZkVxcNN1Iz2HpcQ9mbN5Fah6lD4Axyo/s1600/demomac-ios.png" /></a></div>
850. <b><br class="Apple-interchange-newline" /></b>
851. <b>4- Under the hood</b><br />
852. <br />
853. Wait, Darwino is Java based, so how can we provide a native Objective-C or Swift API? How can we get all the Darwino services, built-in and customs, run natively on any device? As the goal is to have one single Java source code to ensure the consistency between all the platforms, so how is is exposed as an Objective-C API?<br />
854. <br />
855. The magic comes from <a href="https://developers.google.com/j2objc/" target="_blank">J2OBJC</a>. Right from the beginning, we have been very careful to write "portable" Java, meaning Java that can be compiled or transpiled to many different environments (JRE, Dalvik/Art, RoboVM, Multi-OS Engine...). As J2OBJC made a lot of progress these past years, it became easy to get our code transpiled to J2OBJC. The result is a tiny, efficient, native Objective-C library while sharing the same Java source code.<br />
856. With the potential to target other platforms in the future, like .NET: what about having your Domino data replicated natively to .NET? :-)<br />
857. <br /></div>
858. </description><link>http://blog.riand.com/2018/01/offline-your-data-with-react-native.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQHImtwWMtQznUT1xUoE-BB8loZbXkhn63dnOZ_oJVqIydLIvjn1jzvqz_PUO2DATHGH9B_mRLfmgoy6OnHnh9MY1oLYZU3VfqEmmyz_R9qMz0v3Kv46_kLrw7z-isbU-SJf6bvyrJkp0/s72-c/react-native.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-6572401689923569116</guid><pubDate>Tue, 02 Jan 2018 21:07:00 +0000</pubDate><atom:updated>2018-01-04T14:13:26.642-08:00</atom:updated><title>Darwino 2.0 is out!</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
859. <div style="text-align: center;">
860. I'm very exited to announce that the official <b><span style="color: #3d85c6;"><a href="https://www.darwino.com/" target="_blank">Darwino 2.0</a></span></b> has just been released!</div>
861. <br />
862. <div class="separator" style="clear: both; text-align: center;">
863. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LYpOlmY5yic3_nTh7pXYmaD3BEwT9eQjpoFNMJhOf_Se2FrQbFR-nboh4VM2Y1aWi7r9cGPO54itIg6a0tV_JuXULLytEdSZ8z1rJl8BLPYiAGmnmmUvxueJfR_YLOI6wJr-Hb9kMdM/s1600/darwino-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="90" data-original-width="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LYpOlmY5yic3_nTh7pXYmaD3BEwT9eQjpoFNMJhOf_Se2FrQbFR-nboh4VM2Y1aWi7r9cGPO54itIg6a0tV_JuXULLytEdSZ8z1rJl8BLPYiAGmnmmUvxueJfR_YLOI6wJr-Hb9kMdM/s1600/darwino-logo.png" /></a></div>
864. <br />
865. <br />
866. It had been a long journey since the previous release but most of our customers are already using the pre 2.0 release, aka 2.0.0-SNAPSHOT in maven terms. This means that this release has already been tested in many contexts and is thus very stable.<br />
867. <br />
868. The main topics for this major release are:<br />
869. <br />
870. <ul style="text-align: left;">
871. <li><b>Creation of new web and mobile applications</b><br />- Provide the best user experience even when the device is offline<br />- Leverage of the latest technologies, including ReactJS</li>
872. <li><b>Modernization of existing applications, in particular Notes & Domino</b><br />- Liberate the Domino data and take advantage of any data reporting/analytics tool<br />- Get your existing Notes/Domino apps on mobile device with notifications<br />- Create modern mobile applications connected to your IBM Domino data</li>
873. <li><b>Migration of IBM Notes/Domino applications</b><br />- Incremental migration to minimize the risk<br />- Use of modern technologies and development tools<br />- Integrate with MS Sharepoint, Office 365 or other platforms, like Oracle Cloud</li>
874. <li><b>Many additions and enhancements to the existing APIs</b></li>
875. </ul>
876. <br />
877. I bet that the mobile client is going to be popular in our community because... Well, read my next post :-)<br />
878. <br />
879. Bellow is a list of the most noticeable features in 2.0:<br />
880. <br />
881. <h3 style="text-align: left;">
882. Darwino for mobile devices</h3>
883. <b><br /></b>
884. <b>Darwino mobile client</b><br />
885. Darwino provides a generic client that renders server side web applications and handles IBM Cloud notifications. This client is available for both iOS and Android, in their respective application stores.<br />
886. This client can also be fully customized as the full source code is available. For example, one can white label the application with a custom icon, look&feel, options...<br />
887. <br />
888. <b>Multi-OS-Engine instead of RoboVM</b><br />
889. Darwino switched to <a href="https://multi-os-engine.org/" target="_blank">MOE </a>as RoboVM is no longer available since it has been acquired by Microsoft. Darwino 2.0 supports the latest version of MOE. Thanks <a href="https://www.migeran.com/" target="_blank">Migeran </a>for doing this great product!<br />
890. <br />
891. <h3 style="text-align: left;">
892. </h3>
893. <h3 style="text-align: left;">
894. Integration</h3>
895. <b><br /></b>
896. <b>Notification framework</b><br />
897. Darwino provides a notification framework that executes actions based on events. The framework can detect data changes in a database, including domino databases, and run actions like a mobile push notifications, notifying IBM Workspace, sending an email or whatever a piece of code can do...<br />
898. <br />
899. <b>Microsoft Azure active directory support</b><br />
900. Darwino features a driver to consume Microsoft Azure active directory services<br />
901. <br />
902. <b>Microsoft Sharepoint integration</b><br />
903. Darwino integration with Sharepoint, including directory access and single sign-on.<br />
904. <br />
905. <div>
906. <b>More database support</b><br />
907. The MS SQL server support is complete, as well as MySQL (the full JSQL requires MySQL 8+).</div>
908. <div>
909. <br /></div>
910. <h3 style="text-align: left;">
911. Darwino DB</h3>
912. <b><br /></b>
913. <b>JSQL</b><br />
914. JSQL is an SQL dialect dedicated to JSON databases. It allows the full power of SQL queries on top of JSON documents: joins, unions, groups, recursive queries, ... while honoring the document level security. It eventually translates to the native database SQL for maximum performance.<br />
915. <a href="https://playground.darwino.com/playground.nsf/JsqlSnippets.xsp">https://playground.darwino.com/playground.nsf/JsqlSnippets.xsp</a><br />
916. <br />
917. <b>Registered queries</b><br />
918. Database queries can be defined on the server side and consumed by name from the client. This is also true for JSQL queries.<br />
919. <a href="https://playground.darwino.com/playground.nsf/JavaSnippets.xsp#snippet=Json_Store_Cursor_Run_Predefined_Query">https://playground.darwino.com/playground.nsf/JavaSnippets.xsp#snippet=Json_Store_Cursor_Run_Predefined_Query</a><br />
920. <br />
921. <b>Domino @formula</b><br />
922. An extension to the query language uses the new keyword $atFormula and allows the use of a subset of the Notes/Domino @formula language in Darwino queries. That makes the migration of Notes/Domino views a lot easier!<br />
923. <a href="https://playground.darwino.com/playground.nsf/DarwinoDbSnippets.xsp#snippet=@Formula_Simple">https://playground.darwino.com/playground.nsf/DarwinoDbSnippets.xsp#snippet=@Formula_Simple</a><br />
924. <h3 style="text-align: left;">
925. </h3>
926. <h3 style="text-align: left;">
927. </h3>
928. <div>
929. <br /></div>
930. <h3 style="text-align: left;">
931. REST services</h3>
932. <b><br /></b>
933. <b>JSON store services</b><br />
934. Added some new services to retrieve document content without the meta-data.<br />
935. <a href="https://playground.darwino.com/playground.nsf/OpenApiExplorer.xsp#openApi=Json_Store_Document_CRUD">https://playground.darwino.com/playground.nsf/OpenApiExplorer.xsp#openApi=Json_Store_Document_CRUD</a><br />
936. <br />
937. <b>GraphQL</b><br />
938. <b><br /></b>
939. Darwino comes with a innovative implementation of FaceBook's GraphQL, allowing both schema based and schema less queries. Moreover, GraphQL queries can be pre-defined on the server side to make them easier to consume<br />
940. <a href="https://playground.darwino.com/playground.nsf/GraphqlSnippets.xsp">https://playground.darwino.com/playground.nsf/GraphqlSnippets.xsp</a><br />
941. <br />
942. <b>Microservices</b><br />
943. Darwino provides a easy to use JSON microservice infrastructure. The services can be written in Java, Groovy, JavaScript, Darwino Script or any language supported by the JVM.<br />
944. <a href="https://playground.darwino.com/playground.nsf/ServicesSnippets.xsp">https://playground.darwino.com/playground.nsf/ServicesSnippets.xsp</a><br />
945. <h3 style="text-align: left;">
946. </h3>
947. <h3 style="text-align: left;">
948. </h3>
949. <div>
950. <br /></div>
951. <h3 style="text-align: left;">
952. Darwino Studio</h3>
953. <b><br /></b>
954. <b>Application Wizard</b><br />
955. The application creation wizard can now use templates, also known as boilerplate, to get the developer started quickly. A new template using ReactJS and Bootstrap is provided as part of the studio. The architecture is open and any developer can contribute new templates.<br />
956. <br />
957. <b>Android studio</b><br />
958. The wizard can also leverage Android studio for the mobile applications, instead of Eclipse. This allows the developers to benefit from the latest features provided by Google and Multi-OS-Engine.<br />
959. <br />
960. <b>UI Builder</b><br />
961. Darwino studio features an easy form builder that targets mobile devices. This builder is fully extensible to support more targets in the future.<br />
962. <h3 style="text-align: left;">
963. </h3>
964. <h3 style="text-align: left;">
965. </h3>
966. <div>
967. <br /></div>
968. <h3 style="text-align: left;">
969. Darwino for IBM Notes/Domino</h3>
970. <b><br /></b>
971. <b>Domino Designer</b><br />
972. Darwino provides a new Domino Designer plugin that adds a new design element dealing with the notifications. It uses a groovy based DSL (Domain Specific Language) .<br />
973. <br />
974. <b>Darwino client</b><br />
975. The Darwino mobile client detects if the server is an IBM Domino server and adapts some behaviors accordingly, like error handling.<br />
976. <br />
977. <b>Darwino application</b><br />
978. Darwino provides new runtime capabilities to supplement IBM Domino missing features, like JEE filters. Moreover, Darwino applications can be auto-started, for example to monitor events.<br />
979. <br />
980. <div>
981. <b>IBM Domino import</b><br />
982. The Darwino studio can generate a basic UI based on existing IBM Domino NSFs. This feature is a preview, but this is something we'd like to enhance moving forward, to get the mobilization or migration of Notes/Domino import easier.<br />
983. It also generates JSON Schemas based on the Form definition in an NSF.</div>
984. <div>
985. <h3>
986. </h3>
987. <h3>
988. </h3>
989. <div>
990. <br /></div>
991. <h3>
992. Developer tools</h3>
993. <b><br /></b>
994. <b>Commands framework</b><br />
995. Darwino features a command line framework that developer can add to any application to execute administration commands or debug an application.<br />
996. It also includes a built-in application profiler.<br />
997. <br /></div>
998. <div style="text-align: left;">
999. <b>Playground</b></div>
1000. The Playground now show cases the new features like JSQL or GraphQL, but also exposes the REST apis using OpenAPI/Swagger: <a href="https://playground.darwino.com/playground.nsf/OpenApiExplorer.xsp">https://playground.darwino.com/playground.nsf/OpenApiExplorer.xsp</a></div>
1001. </description><link>http://blog.riand.com/2018/01/darwino-20-is-out.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LYpOlmY5yic3_nTh7pXYmaD3BEwT9eQjpoFNMJhOf_Se2FrQbFR-nboh4VM2Y1aWi7r9cGPO54itIg6a0tV_JuXULLytEdSZ8z1rJl8BLPYiAGmnmmUvxueJfR_YLOI6wJr-Hb9kMdM/s72-c/darwino-logo.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-2209506527472084293</guid><pubDate>Fri, 15 Dec 2017 23:26:00 +0000</pubDate><atom:updated>2017-12-15T15:26:52.092-08:00</atom:updated><title>Ubiquity of Java and relational databases</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1002. <div>
1003. <br /></div>
1004. <div>
1005. I'm sometimes being asked about our platform choices of Java and RDBMS for Darwino. More precisely, I'm getting questions about Node.js or existing JSON document databases, like MongoDB or CouchDB.<br />
1006. Well, I can certainly expand on the technical value of our choices, and I'll probably will. But, if the technical aspect is important, this is not the only driver.  It is not even the main one: what made us choose these technologies can be summarized in 3 words: <b>ubiquity</b>, <b>diversity</b> and <b>skill and assets</b>.<br />
1007. <br /></div>
1008. <h2 style="text-align: left;">
1009. Ubiquity</h2>
1010. <div>
1011. Most of our customers have a Java application server and a relational database already in place. Both are almost everywhere. If small companies can be flexible with technology, bigger companies tend to be more conservative. And not to talk about administrations. With Java and RDBMS you can get in right away without going through technology validation processes.<br />
1012. <br /></div>
1013. <div>
1014. The cloud is not different: whenever you want to use MS Azure, IBM Bluemix, Oracle Cloud, Amazon AWS, they all offer you PAAS services with a Java application server and an RDBMS. As a result, your not locked with a vendor. For example, and despite its value, if you choose IBM Cloudant, you're locked with IBM Cloud. For the good and the bad... Did I say the bad?<br />
1015. <br /></div>
1016. <div>
1017. It similarly expands to mobile devices. There is no MongoDB implementation running on these devices, providing offline capabilities with the same set of features. Ok, Cloudant/CouchDB has TouchDB or PouchDB for offline, but these are totally different implementations with different APIs and capabilities. On the other hand, SQLite can be run on any mobile devices from Java.<br />
1018. <br />
1019. With Darwino encapsulating the platform differences, like SQL dialects, you write the application once and you can run everywhere, including on mobile devices.<br />
1020. <br /></div>
1021. <h2 style="text-align: left;">
1022. Diversity</h2>
1023. <div>
1024. There is not a single implementation of Java and RDBMS. Rather, you can find several vendors providing their own JVM, web application servers or RDBMS, with different characteristics. You pick and choose the one that better fits your need, based on both technical or business decisions.<br />
1025. <br /></div>
1026. <div>
1027. Diversity fosters innovation because of the competition: the vendors have to innovate to keep the leadership. Moreover, when a great innovation is brought by one vendor, the other vendors will follow shortly. This is exactly what happened recently with the support of JSON data type, or the in-memory RDBMS. Same with Java processing optimization, like async/actor programming (Akka, Vert.x), or distributed VMs, ... In both spaces, the innovation has been rocking these past years, for our own benefit!<br />
1028. <br /></div>
1029. <div>
1030. On the other hand, if you choose Node.js, well you're locked to one vendor, and even one JS engine (v8). I'm not saying that these are bad, just that you' don't have any choice. Same, and even worse, with MongoDB: do you want to put your business critical data into the hand of a single database vendor? If something goes wrong with these guys, what are your options beyond re-coding your applications to another API/vendor? This is about risk management, a point that every CIO office has in mind.<br />
1031. <br />
1032. Of course, diversity implies differences. But it is pretty easy to overcome them or, better, to leverage the strength of a particular implementation when it makes sense.<br />
1033. <br /></div>
1034. <h2 style="text-align: left;">
1035. Skills and assets</h2>
1036. <div>
1037. Because of their ubiquity, both RDBMS and Java are already well known. This is not only about development skills, but administration, management, backups, and even procurement. The processes are in place. The IT teams are trained: they have to figure day to day issues like performance, network congestion, server availability, quick backup/restore... And they know how to deal with that.<br />
1038. <br />
1039. Finally, the Java ecosystem is far more mature than the Node.js one. Yes, Node is vibrant but go to npm: how do you "separate the wheat from the chaff"? You can find many libraries made by individuals, staled at version 0.x and asking for a new owner. There are some open source organizations around this technology but nothing yet that matches Apache, Eclipse or even OpenNTF. You might find licenses coming with the code but this is not enough: what about the certificates of originality? What guarantees you that the code you're using has not been stolen?<br />
1040. As bigger companies are chiming in, this will certainly evolve to a more controlled world. IBM, for example, has it own internal npm server. But I bet that many smaller companies, or companies not in the IT business cannot afford doing the same.<br />
1041. <br />
1042. <br />
1043. In short, choosing the technologies that power a framework goes way beyond comparing their technical characteristics. There are other factors that can be even more important, and that's the reason why we chose Java and RDBMS. Now, on the pure technical side, both also have very competitive advantage, but I'll expand on that later!<br />
1044. <br />
1045. <div class="separator" style="clear: both; text-align: center;">
1046. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEJ4Douy46ueCb9HuxFEfwm9aFrnOpePp7Ubk3JICeMhgcTtekYxDOVaHLeybAeAqdRd3lmTKr2JDNdPtGoGXeNxO2zcxm0JUVCKjfXrcC5yUg8w1fgkyg0Gf9BgCVktEwk8BUsbSvmLs/s1600/javardbms.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="263" data-original-width="331" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEJ4Douy46ueCb9HuxFEfwm9aFrnOpePp7Ubk3JICeMhgcTtekYxDOVaHLeybAeAqdRd3lmTKr2JDNdPtGoGXeNxO2zcxm0JUVCKjfXrcC5yUg8w1fgkyg0Gf9BgCVktEwk8BUsbSvmLs/s320/javardbms.png" width="320" /></a></div>
1047. <br /></div>
1048. </div>
1049. </description><link>http://blog.riand.com/2017/12/ubiquity-of-java-and-relational.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEJ4Douy46ueCb9HuxFEfwm9aFrnOpePp7Ubk3JICeMhgcTtekYxDOVaHLeybAeAqdRd3lmTKr2JDNdPtGoGXeNxO2zcxm0JUVCKjfXrcC5yUg8w1fgkyg0Gf9BgCVktEwk8BUsbSvmLs/s72-c/javardbms.png" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-5820947084364327996</guid><pubDate>Sun, 12 Nov 2017 21:00:00 +0000</pubDate><atom:updated>2017-11-12T14:40:51.822-08:00</atom:updated><title>Develop a Domino application using any modern tools</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1050. In my previous <a href="http://blog.riand.com/2017/11/modern-notes-like-ui-using-reactjs.html">post</a>, I talked about a ReactJS library of components that can be used to create Notes like UI. It allows developers to create modern web and mobile UIs in a flash. Fine but, if Domino Designer is a great tool for rapidly developing applications, it is unfortunately not designed to create such modern applications, mostly because:<br />
1051. <br />
1052. <ul style="text-align: left;">
1053. <li>It does not integrate with the modern tool chain required by these libraries, like maven, npm,  babel, webpack...</li>
1054. <li>It has a very limited JavaScript editor that cannot compete against Atom or MS Visual Code. Not talking about the latest standards support, like ES6.</li>
1055. <li>Source control and continuous build/integration are very limited</li>
1056. <li>Well, it is Windows only</li>
1057. </ul>
1058. <br />
1059. We've been thinking about these problems for a while and we worked to provide a solution. Part of the problem comes from the fact that the NSF is both the development and the deployment container, with no third party development tool in the market being able deal with the NSF content. The on-disk projects were an attempt to fix that issue, but this is for source control only.<br />
1060. <br />
1061. With Darwino, we go a step further: we allow developers to create projects using the tools they love (Eclipse, IDEAJ, Ms Visual Studio Code, Atom, ...), then use any of these tools during development and deploy the final result into an NSF.<br />
1062. <br />
1063. Ok, better to first see it in action:<br />
1064. <div class="separator" style="clear: both; text-align: center;">
1065. <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/F4nrmLpPI98/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/F4nrmLpPI98?feature=player_embedded" width="320"></iframe></div>
1066. <br />
1067. <br />
1068. In this example, I used the Darwino studio to create a new ReactJS application within Eclipse and I'm using MS Visual Studio Code to develop the client side JavaScript. I can use source control, maven, npm, without any limitation, as I'm outside of Domino Designer. Moreover, the Darwino ReactJS library allows me to seamlessly call the Domino REST services, even though I'm running the Webpack dev server. Ah, you might have noticed, I did all the development on a Mac...<br />
1069. <br />
1070. When I build the project by running maven, the relevant built files (JavaScript files, Jar files for the business logic...) are seamlessly deployed to the NSF, making the application instantly available from the Domino server. The source files are by default *not* deployed to the NSF, making it smaller and not triggering a build process when opened within Designer. Finally, your IP is also protected.<br />
1071. <br />
1072. The magic behind that is a design element server installed right into Domino Designer, as part of the Darwino extension for Darwino Designer. This server exposes some REST services on port 8800: list of projects, access to design elements, ... These services are called by a client, like the Darwino studio in Eclipse, to deploy the runtime files when desired. Because it is all based on standard REST services, other clients, like pure JavaScript ones, can be developed as well. Seems easy right? Well, the evil is as always in the implementation details, but hopefully this is all written using the Darwino runtime, which drastically simplified the development.<br />
1073. <br />
1074. The cherry on the cake: the code for these services is isolated from Domino Designer itself, so it could be installed directly within a Domino server. This would remove the requirement of using Domino Designer for development, at least when not developing"classic" notes applications -> it can enable a pure Web based Designer for citizen developers.<br />
1075. <br />
1076. Let me know what you  think about it!<br />
1077. <br />
1078. <h3 style="text-align: left;">
1079. Darwino Studio Screenshots</h3>
1080. Configuring the Design Server<br />
1081. <div class="separator" style="clear: both; text-align: center;">
1082. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsWlSHmm6fDRqFH-8gO5lZ5O_HyQwYmtIhfoUUxitUD6d5wZ59sZKIs-mmg_0WImJuJA76iiyBjPx5Ub9huNk2OHBnF9rvM0W_IvJSsRISbAbCvuLY_UQ0ZkpVdjebxfBxE1XXeMWolN0/s1600/global+prefs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="246" data-original-width="658" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsWlSHmm6fDRqFH-8gO5lZ5O_HyQwYmtIhfoUUxitUD6d5wZ59sZKIs-mmg_0WImJuJA76iiyBjPx5Ub9huNk2OHBnF9rvM0W_IvJSsRISbAbCvuLY_UQ0ZkpVdjebxfBxE1XXeMWolN0/s640/global+prefs.png" width="640" /></a></div>
1083. <br />
1084. Configuring the project files to synchronize:<br />
1085. <div class="separator" style="clear: both; text-align: center;">
1086. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdBU8zfg5j1vKNU_7xp4CYCe4riD48TCMEf68uV7fncRF8dr-vfFoGG5F-uKtk06m6aGvxxW7n-U0X53pAlcn6DH0PQ5jmWr7RdDonVHJYN1D7ZL6bvnWID8y1uZnoOY6AZctzXPNJ7g/s1600/project+prefs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="416" data-original-width="527" height="502" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdBU8zfg5j1vKNU_7xp4CYCe4riD48TCMEf68uV7fncRF8dr-vfFoGG5F-uKtk06m6aGvxxW7n-U0X53pAlcn6DH0PQ5jmWr7RdDonVHJYN1D7ZL6bvnWID8y1uZnoOY6AZctzXPNJ7g/s640/project+prefs.png" width="640" /></a></div>
1087. <br /></div>
1088. </description><link>http://blog.riand.com/2017/11/develop-domino-applications-using-ms.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img.youtube.com/vi/F4nrmLpPI98/default.jpg" height="72" width="72"/><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-2022992917252218489</guid><pubDate>Thu, 09 Nov 2017 18:21:00 +0000</pubDate><atom:updated>2017-11-09T10:21:06.459-08:00</atom:updated><title>Modern Notes like UI using ReactJS</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1089. The world is evolving fast, and so technologies are. Today, for now a little while, when we talk about building a new web UI or a mobile hybrid one, we think about using pure client technologies without markup generation on the server side. JSF, JSP, ASP.NET are being replaced by Angular, ReactJS, VueJS and services...  I personally think this is a great evolution. But, are these technologies easy enough to use? Can a developer be as productive as he/she is with XPages, for example? Well, the quick answer is no, at least without any addition to these core libraries, in term of components and tooling.<br />
1090. <br />
1091. This is the problem we are currently tackling with Darwino: let's make it easy to consume these new JavaScript technologies without compromising their power. For these, Darwino 2.0 is featuring a brand new ReactJS component libraries as well as some new templates (or boilerplates, or pods, ...) that make the creation of a project easy.<br />
1092. <br />
1093. The components should give you all the necessary UI constructs to create a form based application. Of course, all of this is responsive to adapt to mobile devices. In short, everything you need to build Notes/Domino like applications in minutes, but with pure standard ReactJS.<br />
1094. Curious? Have a look a running instance here <a href="http://playground.darwino.com:8080/contacts-react">http://playground.darwino.com:8080/contacts-react</a> (use demo/demo to log in)<br />
1095. <br />
1096. The applications should also be data source agnostic, in a sense that the same application should,  almost seamlessly, connect the Darwino JSON store, or to Notes/Domino backend, or even other DB like LiveGrid data store. With this architecture in mind, these applications can work online, connecting to any server data, but also offline, connecting to the locally Darwino replicated data in your mobile device.<br />
1097. <br />
1098. There are different steps in this journey. Let's go through them.<br />
1099. <br />
1100. <h2 style="text-align: left;">
1101. Choosing the JS library/framework</h2>
1102. <div>
1103. There is nothing wrong picking up one of the major library currently available. In a <a href="http://blog.riand.com/2017/01/reactjs-or-angularjs-what-about.html">previous post</a>, I explained why we choose VueJS for ProjExec and how our developers quickly became productive using this library. It was great with this goal in mind.</div>
1104. <div>
1105. Darwino has different goals. As a development tool, it should target the broader set of use cases. This implies using a library with a bigger eco-systems, a large set of third party additions, several rendering libraries (bootstrap, material design...). For these reasons, we choose ReactJS, as it is adopted by the many vendors like IBM or Microsoft. The later is interesting, as we can quickly create apps with the Office look & feel, thanks to the <a href="https://developer.microsoft.com/en-us/fabric">Office UI Fabric</a>. </div>
1106. <div>
1107. <br /></div>
1108. <div>
1109. ReactJS it is.</div>
1110. <div>
1111. <br /></div>
1112. <h2 style="text-align: left;">
1113. Choosing the right ReactJS components</h2>
1114. ReactJS by itself is low-level: let's consider it as a powerful, core engine that can be extended through components. For example, ReactJS has *no* built-in data binding capabilities like the one you'll find in Angular or VueJS. You should either implement them yourself, or use a third party library.<br />
1115. To get a decent set of capabilities without reinventing the wheel, you have to pick-up libraries from one of the large JavaScript repositories. Nowadays, I would advise you to use npm (or eventually yarn) and leave tools like Bower to the historian.<br />
1116. Gasp, this is where the troubles come in: the npm repository features a plethora of libraries designed for the same job. How would you pickup one over the others? Number of downloads? Stars on Github? Recent activity? Return on experience from other developers? Making the right choices takes time as there is no obvious ones.<br />
1117. <br />
1118. For Darwino, we choose the following:<br />
1119. <ul style="text-align: left;">
1120. <li>react-redux</li>
1121. <li>react-router</li>
1122. <li>redux-form</li>
1123. <li>react-intl</li>
1124. <li>react-data-grid</li>
1125. <li>react-bootstrap (or eqv for other UI targets)</li>
1126. <li>... and a few others</li>
1127. </ul>
1128. <br />
1129. <h2 style="text-align: left;">
1130. Project boilerplates</h2>
1131. If, for you, building an app if about saving a design element in an NSF, then your life is good. The JavaScript world is way more complex! Even if JavaScript is an interpreted language, you'll quickly feel the need of running build tools to use the latest JS specifications, consume libraries, produce an optimized/compressed version of the code... Again, you 'll have to make some choices between Grunt, Gulp, Webpack, Browserify, ... and many other tools. This is another time consuming research.<br />
1132. Once your choice is made, you have to configure the tools, generally using a JavaScript based DSL (e.g. a JavaScript piece of code driving the tool). This is fairly complex as the DSLs feature many options. To get started, developers created templates, also called boilerplates. They contains the configuration files with default behaviors that you then have to customize. But again you have many available, with some clearly developed by people without a deep knowledge of the technology. Furthermore, they are generally tailored for a particular version of the tool and will not function properly with yours...<br />
1133. Ok, we spent many days of try/fail/redo and we are coming with our own template. Well, it is even easier: go to the Darwino studio, create a new project, select the target technology and voila, you're ready to go. Pfuuuu...<br />
1134. <br />
1135. <h2>
1136. Component library</h2>
1137. As we'd like to make the developer experience as smooth as possible, we are providing a series of ready to use components covering most of the developer needs. What started as a demo library became a very useful set of components, covering:<br />
1138. <br />
1139. <ul style="text-align: left;">
1140. <li>Forms with document access (load, save, validation)</li>
1141. <li>Data binding controls, including read-only mode, multiple values, pickers, rich text, attachments upload & download</li>
1142. <li>Computed fields (yes, not that obvious with ReactJS!)</li>
1143. <li>Data grid with Notes view like behaviors: categorization, totals, response doc</li>
1144. <li>Navigators, action bars, sub-forms</li>
1145. <li>Dialogs, messages</li>
1146. <li>Easy access to server side business logic using micro services</li>
1147. </ul>
1148. <br />
1149. And more... But again, these components are just regular ReactJS components, that any ReactJS developer would consume without fear. They do not carry any idiosyncrasies from the original Notes ones. They exist to create Notes like UI for Web and Mobile, not to replicate 1-1 what the Notes UI does.<br />
1150. <br />
1151. Ah, I foresee a question: can you automatically convert an existing Notes UI to this technology? The answer is... yes! Feel interested?<br />
1152. <br /></div>
1153. </description><link>http://blog.riand.com/2017/11/modern-notes-like-ui-using-reactjs.html</link><author>noreply@blogger.com (Philippe Riand)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-2964948901338965155</guid><pubDate>Wed, 18 Oct 2017 19:21:00 +0000</pubDate><atom:updated>2017-10-18T12:21:18.081-07:00</atom:updated><title>Universal Data Replication</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1154. One of the Darwino piece of code that I'm the most proud of is the replication engine. If a majority of our customers see it as a Domino to JSON replication engine, it goes far beyond that. In reality, it can replicate between virtually any data sources.<br />
1155. It is a true, two ways, multi-point replication engine, borrowing some ideas from IBM Domino but going beyond its venerable ancestor in multiple places.<br />
1156. <br />
1157. <h2 style="text-align: left;">
1158. The architecture</h2>
1159. <div>
1160. The main idea is that any data set can be represented as a set decorated JSON objects. Decorations include meta-data (ex: data security, replication attributes...) and binary attachments. The latest are stored apart from the JSON itself for performance reasons.</div>
1161. <div>
1162. As an example, a Domino document can be transformed to a JSON object where every Domino document item is converted to a JSON attribute in the object, along with the attachments.</div>
1163. <div>
1164. A relational table can also be transformed to a set of JSON objects or arrays, one per row. Even more interesting, a set of rows coming from multiple tables can be grouped to create a consistent, atomic  JSON object. This way, the replication granularity is not limited to a row, but can be a whole business object even if the physical storage split it into multiple records</div>
1165. <div>
1166. <br /></div>
1167. <div>
1168. Dawino's engine is mostly made of two components:<br />
1169. <br />
1170. <ol style="text-align: left;">
1171. <li>A universal replication engine<br />This engine does *not* know about the data sources. It contains all the replication logic while it accesses the data through a generic connector API</li>
1172. <li>Connectors<br />A connector encapsulates the physical access to the data, via an API. Its API provides a "JSON" vision of the data that we'll be consumed by the engine</li>
1173. </ol>
1174. As of today, the Darwino replication engine comes with ready to use connector implementations:<br />
1175. <br />
1176. <ul style="text-align: left;">
1177. <li>Darwino JSON store, running atop RDBMS</li>
1178. <li>IBM Domino</li>
1179. <li>FlowBuilder XML store, used by ProjExec</li>
1180. <li>HTTP to wrap a local connector and use HTTP/HTTPS as the transport</li>
1181. </ul>
1182. Some other connectors have been started:<br /><ul style="text-align: left;">
1183. <li>Pure RDBMS used, for example, to replicate to DashDB</li>
1184. <li>MongoDB</li>
1185. <li>MS Sharepoint List</li>
1186. </ul>
1187. <br />
1188. We are also waiting for a first beta release of IBM LiveGrid to replicate these data to your mobile devices and get a true offline expereince.<br />
1189. <br />
1190. Writing a basic connector is a pretty easy operation. Then, the connector can be enhanced incrementally to provide fine tuned capabilities (better conflict detection....)<br />
1191. <br />
1192. <h2 style="text-align: left;">
1193. Darwino replication strengths</h2>
1194. <br />
1195. If the concept of replication feels easy to understand, there are many details that make Darwino unique so far:<br />
1196. <br />
1197. <h3 style="text-align: left;">
1198. Data transformation</h3>
1199. </div>
1200. <div>
1201. The data can be transformed two ways during the replication process. These transformations can happen at the basic field level (ex: transforming a Domino name to its LDAP counterpart) or at a more global level, like grouping a set of Domino multiple fields into a JSON array. This way, the replicated JSON is clean, and it does not carry any legacy tricks from the source platform.</div>
1202. <div>
1203. The transformation can obviously be coded, in Java or Groovy, but Darwino already comes with a pretty large set of standard transformations you can apply to any data. Thus, setting up the transformation is mostly about scripting the pre-defined transformers, unless you have more advanced need.</div>
1204. <div>
1205. One of the benefit of data transformation is data normalization: you can ensure that the fields in a JSON document are converted to the expected data type. Domino is well know have inconsistent fields across the whole database, as they evolved over time. Darwino can normalized them.</div>
1206. <div>
1207. <br /></div>
1208. <h3 style="text-align: left;">
1209. Selective replication</h3>
1210. <div>
1211. Sometimes you want to limit the data replicated to a target system. It can be because of storage requirements (ex: your mobile device can only handle a subset of the data), or security (ex: you only want some data to be available on the cloud).</div>
1212. <div>
1213. Darwino handles the selective replication by either providing selection formulas based on data. It also provides a unique feature called "Business Replication" where related documents can be grouped and replicated as a whole.</div>
1214. <div>
1215. Selective replication poses a problem: how to propagate deletions as the data used to select the documents no longer exists, or how to remove a document from the target when the formula no longer selects that document? Well, we solved this problem with an efficient and reliable method that I'll be happy to talk about around a beer :-) This is a pretty complex problem.</div>
1216. <div>
1217. <br /></div>
1218. <h3 style="text-align: left;">
1219. Transaction and error recovery</h3>
1220. <div>
1221. If the target database supports transactions, then the engine can take advantage of them. If the replication fails for any reason, then it can rollback to the initial state, and eventually attempts another time. But this is not enough: when you have a large data set to replicate, you might not want to restart from scratch while you already replicated 98% of the data. For that purpose, the engine features commit points. If it fails at any time, it only restarts from the latest successful commit point.</div>
1222. <div>
1223. <br /></div>
1224. <h3 style="text-align: left;">
1225. Conflict detection</h3>
1226. <div>
1227. This is one of the area were Darwino excels. It has multiple conflict detection systems, going way beyond Domino. A particular connector might only implement a subset of them, depending on the data source capabilities. In this happens, then the engine will degrade gracefully and deal with what is available.</div>
1228. <div>
1229. The existing mechanisms include: the last modification date, a sequence id (similar to Domino or some RDBMS), a change string carrying the update history, an update id...</div>
1230. <div>
1231. Once a conflict is detected, an API is called and the developer can choose to execute a predefined behavior (ignore, last wins, create a copy data set...) or do a custom resolution like a data merge.</div>
1232. <div>
1233. Finally, Darwino has an interesting mechanism to deal with records deletion. If the source database has deletion stubs, it will effectively use them. Else, it provides some helpers to find the deleted records, in particular within relational tables.</div>
1234. <div>
1235. <br /></div>
1236. <h3 style="text-align: left;">
1237. Performance</h3>
1238. <div>
1239. The whole Darwino replication engine is designed to handle very large datasets. The Domino connector is mostly written in "C", thus calling the native "C" API. Not only this allows critical features that are not available with the regular back-end classes, but it also provide high performance data replication. On my laptop, it replicates ~400 complex documents/second, including attachments and rich text conversion. For simpler documents, with only basic data, it goes to the range of 1000-2000 a second! In many cases, you can get your existing NSF replicated in minutes.</div>
1240. <div>
1241. <br /></div>
1242. <h3 style="text-align: left;">
1243. Domino data accuracy</h3>
1244. <div>
1245. A replication engine only makes sense if it is high fidelity. From a Domino perspective, the Darwino replication should act like a regular Domino replication, maintaining the same data (sequence id, creation and modification dates, list of authors...). We can do that thanks to the "C" API.</div>
1246. <div>
1247. Darwino can replicate most of the Domino field types: string, number, name, rich text, mime, date/time... with maximum precision. For example, it deals particularly well with the date/time and the time zones.</div>
1248. <div>
1249. Any domino document can be replicated, including design elements or profile documents. If you choose to replicate the database ACL document, then it will then be used by the Darwino runtime to apply the same security. Talking about security, we also handle the reader/author fields.</div>
1250. <div>
1251. <br /></div>
1252. <h3 style="text-align: left;">
1253. Aggregation</h3>
1254. <div>
1255. Data can be aggregated during replication: multiple sources of data can be replicated in one single target database, thus allowing a more global view of the whole data set. Think about it: you can replicate many NSF into a single set of relational tables and then run global queries on top of these tables. Isn't that a dream? <b>Darwino liberates you Domino data!</b></div>
1256. <div>
1257. <br /></div>
1258. <div>
1259. <br /></div>
1260. <div>
1261. As you see, the Darwino replication engine is a very complete engine that is flexible to handle many data sources. Out of the box, it can replicate your databases as is. But it also give you a lot of options to select and transform your data.</div>
1262. </div>
1263. </description><link>http://blog.riand.com/2017/10/universal-data-replication.html</link><author>noreply@blogger.com (Philippe Riand)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-4229824040749920326</guid><pubDate>Thu, 15 Jun 2017 23:03:00 +0000</pubDate><atom:updated>2017-06-15T16:03:47.878-07:00</atom:updated><title>The power of Domain Specific Languages</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1264. We are all used to configuration files, whenever they are XML, JSON or simply text based. If this is ok for simple configurations, but it falls short when the complexity increases. The biggest issue is that they cannot provide more than what they are designed for, basically static values.<br />
1265. <br />
1266. Let's suppose, for example, that we have an XML configuration file exposing a property like:<br />
1267. <div style="text-align: left;">
1268. <span style="font-family: "courier new" , "courier" , monospace;">  <visible>true</visible</span>></div>
1269. Ok, simple enough. This property can be <span style="font-family: "courier new" , "courier" , monospace;">true </span>or <span style="font-family: "courier new" , "courier" , monospace;">false</span>. But now what if I want a more dynamic value, like <span style="font-family: "courier new" , "courier" , monospace;">true </span>if I'm in development mode, or <span style="font-family: "courier new" , "courier" , monospace;">false </span>if I'm in production? I'm stuck!<br />
1270. <br />
1271. Some configuration systems allows expressions to be evaluated within the configuration text, like:<br />
1272. <span style="font-family: "courier new" , "courier" , monospace;">  <visible>${runtime.development}</visible</span>><br />
1273. <div>
1274. But this is very specific to every configuration system, when it exists. Moreover, this is limited to value replacement. What if I want to define a set of properties based on a condition? Well, some rare systems provide an advanced syntax, like</div>
1275. <div>
1276. <span style="font-family: "courier new" , "courier" , monospace;">  <sys:if cond='</span><span style="font-family: "courier new" , "courier" , monospace;">runtime.development'></span><br />
1277. <span style="font-family: "courier new" , "courier" , monospace;">    <prop1>val1</prop1></span><br />
1278. <span style="font-family: "courier new" , "courier" , monospace;">    <prop2>val2</prop2></span><br />
1279. <span style="font-family: "courier new" , "courier" , monospace;">  </</span><span style="font-family: "courier new" , "courier" , monospace;">sys:if></span></div>
1280. <div>
1281. Looks like the venerable XSL :-) This is about inventing a new ugly programming language that nobody knows about. And it is still have limitations, basically what the programmer provided. </div>
1282. <div>
1283. <br /></div>
1284. <div>
1285. The use of the programming constructs I know would be more appealing to me. What about:</div>
1286. <div>
1287. <div>
1288. <span style="font-family: "courier new" , "courier" , monospace;">  if(</span><span style="font-family: "courier new" , "courier" , monospace;">runtime.development) {</span><br />
1289. <span style="font-family: "courier new" , "courier" , monospace;">    <prop1>val1</prop1></span><br />
1290. <span style="font-family: "courier new" , "courier" , monospace;">    <prop2>val2</prop2></span><br />
1291. <span style="font-family: "courier new" , "courier" , monospace;">  }</span></div>
1292. </div>
1293. <div>
1294. or even better:</div>
1295. <div>
1296. <div>
1297. <span style="font-family: "courier new" , "courier" , monospace;">  if(</span><span style="font-family: "courier new" , "courier" , monospace;">runtime.development) {</span><br />
1298. <span style="font-family: "courier new" , "courier" , monospace;">    prop1 val1</span><br />
1299. <span style="font-family: "courier new" , "courier" , monospace;">    prop2 val2</span><br />
1300. <span style="font-family: "courier new" , "courier" , monospace;">  }</span></div>
1301. </div>
1302. <div>
1303. This is mixing and matching configuration statements with regular programming ones. This allows a total flexibility on what is possible! We just need a programming language that supports this kind of construction, including the use of a dedicated grammar to provide <span style="font-family: "courier new" , "courier" , monospace;">prop1 </span>and <span style="font-family: "courier new" , "courier" , monospace;">prop2</span>. The programming language, along  with this specific, dedicated grammar, is what is called a Domain Specific Language, aka DSL. </div>
1304. <div>
1305. <br /></div>
1306. <div>
1307. In the Java world, <a href="http://groovy-lang.org/">Groovy </a>is currently the clear leader. It is being used in many systems, with even <a href="https://www.packtpub.com/application-development/groovy-domain-specific-languages-second-edition">books </a>written on this very topic. Its parenthesis less syntax when calling a method, the use of closures (similar to java 8 lambdas) make it particularly suited for the job.</div>
1308. <div>
1309. <br /></div>
1310. <div>
1311. They are several places where we are using a Groovy based DSL in <a href="https://www.darwino.com/">Darwino</a>. This is what allows, for example, a very flexible data replication configuration between IBM Domino and the Darwino JSON store. Not only we are providing many predefined data transformations but we let the developer insert custom code almost everywhere.</div>
1312. <div>
1313. <br /></div>
1314. <div>
1315. Recently, we introduced another DSL in our new micro application architecture. In particular, we added triggers and actions, for example to send a notification to mobile devices when a new document has been inserted in a particular database. Or any other action, on any other trigger...</div>
1316. <div>
1317. <br /></div>
1318. <div>
1319. Here is a mock example bellow. If it seems trivial, it shows that some code can be inserted to lookup a user in the LDAP directory to find its mobile id, or calculate the URL of the page to display. This would have been hard to define these custom processing with a simple static configuration file.</div>
1320. <div>
1321. <br /></div>
1322. <div>
1323. <div>
1324. <span style="font-family: "courier new" , "courier" , monospace;">DatabaseTrigger {</span></div>
1325. <div>
1326. <span style="font-family: "courier new" , "courier" , monospace;">  database "MyDatabase"</span></div>
1327. <div>
1328. <span style="font-family: "courier new" , "courier" , monospace;">  view "Workflows"</span></div>
1329. <div>
1330. <span style="font-family: "courier new" , "courier" , monospace;">  handler { doc -></span></div>
1331. <div>
1332. <span style="font-family: "courier new" , "courier" , monospace;">    def approver = LookupUser doc["Approver"]</span></div>
1333. <div>
1334. <span style="font-family: "courier new" , "courier" , monospace;">    def url = calculateDisplayUrl(doc)</span></div>
1335. <div>
1336. <span style="font-family: "courier new" , "courier" , monospace;">    pushNotification {</span></div>
1337. <div>
1338. <span style="font-family: "courier new" , "courier" , monospace;">     </span><span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;">ids approver.mobileid</span></div>
1339. <div>
1340. <span style="font-family: "courier new" , "courier" , monospace;">     </span><span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;">page url</span></div>
1341. <div>
1342. <span style="font-family: "courier new" , "courier" , monospace;">     </span><span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;">text "Purchase Approval Pending"</span></div>
1343. <div>
1344. <span style="font-family: "courier new" , "courier" , monospace;">    }</span></div>
1345. <div>
1346. <span style="font-family: "courier new" , "courier" , monospace;">  }</span></div>
1347. <div>
1348. <span style="font-family: "courier new" , "courier" , monospace;">}</span></div>
1349. </div>
1350. <div>
1351. <br /></div>
1352. <div>
1353. Neat, concise and simple, isn't it? </div>
1354. <div>
1355. In this example, <span style="font-family: "courier new" , "courier" , monospace;">pushNotification</span> is a predefined action but other actions types  are available (<span style="font-family: "courier new" , "courier" , monospace;">sendEmail</span>, <span style="font-family: "courier new" , "courier" , monospace;">watsonWorkNotification</span>...). Moreover, if Darwino does not provide a trigger or a notification you need, then it is very easy for a developer to inject a custom one into the DSL. Just develop it in Groovy or Java and register it. A DSL is very dynamic and extensible.</div>
1356. <div>
1357. <br /></div>
1358. </div>
1359. </description><link>http://blog.riand.com/2017/06/the-power-of-domain-specific-languages-1.html</link><author>noreply@blogger.com (Philippe Riand)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-7185254714052651077</guid><pubDate>Sat, 11 Mar 2017 20:31:00 +0000</pubDate><atom:updated>2017-03-12T09:19:02.717-07:00</atom:updated><title>Darwino as the IBM Domino reporting Graal(*) </title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1360. Reports, dashboards, data analytics... have been the conundrum of IBM Notes/Domino since the beginning. Its proprietary data structure, the absence of standard APIs and its deficient query capability make it very difficult. This has been ranked as one of the top need for any for business applications. I know several business partners who created great Domino solutions but struggling with poor reporting capabilities.<br />
1361. <br />
1362. Of course some attempts were made to fix it: <a href="http://www-03.ibm.com/software/products/en/ibmenterpriseintegrator">LEI</a>, <a href="http://www-01.ibm.com/support/docview.wss?uid=swg21384421">DB2NSF</a>,.. all incomplete and anyway defunct. I personally tried a new approach with <a href="https://github.com/OpenNTF/DomSQL">DomSQL</a>, which, to be frank, I was proud of :-) But this was a first shot, more a POC than a product, although I know several customers using it in production. Unfortunately, despite the community interest, IBM didn't want to move it forward, so it is barely in the state where I left it. On the positive side, it gave me a great low level SQLite experience which is now leveraged in Darwino's mobile database! Learn, learn, learn, you'll always reuse it.<br />
1363. <br />
1364. So we are back 2 decades ago, with no solution to this common business problem. Well, you anticipated, Darwino can help! It is actually the first and immediate benefit than our customers are getting when they start with Darwino.<br />
1365. <br />
1366. One of the Darwino capability is data replication. It can replicate, two ways and real real time, any Domino data into its own document store. From a Domino standpoint, Darwino is behaving as another Domino server, with high fidelity replication. But Darwino document store is a JSON based store, sitting on top of an RDBMS. As modern RDBMS now understand JSON natively, this is a great fit. The whole replicated data set is then query-able by any tool that understands RDBMS. With no limitation but the relational database itself. Yes, you can join, aggregate, union, calculate, select, sub select... And, contrary to LEI, this is a real incremental replication that can be triggered when a data event occur on the domino server, keeping your data up-to-date at any time. No more nightly/weekly batch data copy, if you know what I mean.<br />
1367. <br />
1368. From a technical standpoint, Darwino stores a JSON version of the domino document within a column in a relational table. It is very flexible as it does not require a custom table schema per fdata set, and there is no data loss (e.g. a field you forgot to define a column for...). Moreover, if the default field conversion between the two database is 1-1, this is actually fully customizable. The Darwino replication process can transform the data during the replication phase. This is achieved using a Groovy based <a href="https://www.slideshare.net/darwinodb/11-advanced-replication?qid=85c36ad3-d2cf-4582-a948-e2a2654eb063&v=&b=&from_search=18">DSL</a>, which allows the following:<br />
1369. <br />
1370. <ul style="text-align: left;">
1371. <li>The fields type can be normalized (e.g. make sure that the field in the JSON document is of the expected data type). Common issue with Notes inconsistent data type across documents, right?</li>
1372. <li>Domino patterns/workaround can also be normalized. For example, a set a multi value fields describing a table can be transform a true JSON array</li>
1373. <li>Computation can be done ahead of time to make the reporting easier (queries, calculated columns...)</li>
1374. <li>... well, your imagination</li>
1375. </ul>
1376. If you feel that directly reporting on the JSON column within the RDBMS is uneasy, then you can create RDBMS views (standard or materialized), to then act on a table like structure. This is what our partner, CMS, chose to do. Going even further, they are creating these relational views out of the Domino view design elements. Introduction to their product is available <a href="https://www.slideshare.net/darwinodb/16-endeavour-reporter?qid=85c36ad3-d2cf-4582-a948-e2a2654eb063&v=&b=&from_search=20">here</a>. This is a great use of Darwino.<br />
1377. <div>
1378. <br /></div>
1379. <div>
1380. In a previous post, I spoke about <a href="http://blog.riand.com/2017/01/when-sql-meets-nosql-you-get-best-of.html">JSQL</a>, which is a easy way for querying JSON data using SQL. Thinking forward, we can provide a JDBC driver to expose JSQL and allow any JDBC compliant client to access the data. From a technical standpoint, we know how to do it: the above mentioned DomSQL features one we can adapt and reuse. This is not in our current plan, but I'll be interested to know if you have any interest in this.</div>
1381. <div>
1382. <br /></div>
1383. <div>
1384. As a summary, using Darwino as a Domino report tool enabler is a fast way to fulfill some crucial, missing Domino capability. It almost instantly makes the existing Domino applications more interesting to the business users. Of course, this is just a subset of what Darwino can bring to the table, but this is a quick, high value one. Please, give it a shot or contact us so we can help you.<br />
1385. <br />
1386. BTW, "Graal" is the French spelling for Holy Grail</div>
1387. <div>
1388. <br /></div>
1389. <div>
1390. <br /></div>
1391. <div class="separator" style="clear: both; text-align: center;">
1392. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjID0RmNkaYDJVaH-p3Kmf-YntqV6Q4LYIpZq7ZQzgpWgJGlSGADaoRfK1P5mFn0qMrizqEAOf7AoWuFYK6jbVAGsHfNrVALCWbF2f_6O_RmziRE-Djgf73Kh-iyigw8vD4exUuc-mVxYM/s1600/3d-graph-clip-art-at-clker-com-vector-clip-art-online-royalty-free-hc41nE-clipart.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjID0RmNkaYDJVaH-p3Kmf-YntqV6Q4LYIpZq7ZQzgpWgJGlSGADaoRfK1P5mFn0qMrizqEAOf7AoWuFYK6jbVAGsHfNrVALCWbF2f_6O_RmziRE-Djgf73Kh-iyigw8vD4exUuc-mVxYM/s320/3d-graph-clip-art-at-clker-com-vector-clip-art-online-royalty-free-hc41nE-clipart.png" width="282" /></a></div>
1393. <div>
1394. <br /></div>
1395. <div>
1396. <br /></div>
1397. </div>
1398. </description><link>http://blog.riand.com/2017/03/darwino-as-ibm-domino-reporting-graal.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjID0RmNkaYDJVaH-p3Kmf-YntqV6Q4LYIpZq7ZQzgpWgJGlSGADaoRfK1P5mFn0qMrizqEAOf7AoWuFYK6jbVAGsHfNrVALCWbF2f_6O_RmziRE-Djgf73Kh-iyigw8vD4exUuc-mVxYM/s72-c/3d-graph-clip-art-at-clker-com-vector-clip-art-online-royalty-free-hc41nE-clipart.png" height="72" width="72"/><thr:total>3</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-6786064980338971725</guid><pubDate>Fri, 03 Mar 2017 22:56:00 +0000</pubDate><atom:updated>2017-03-03T14:56:38.966-08:00</atom:updated><title>Schemaless GraphQL</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1399. FaceBook officially introduced a few months ago a new technology called <a href="http://graphql.org/">GraphQL</a>. Well, rather than really being new, FaceBook made public and open source their internal graph query engine. <span lang="EN">It starts to be widely used for exposing APIs. For example, IBM Watson Worskpace makes use
1400. of it. I also heard that IBM Connections will also use it.</span><br />
1401. <span lang="EN"><br /></span>
1402. <span lang="EN">In a nutshell, it allows powerful, tailored queries including navigation between the data sources, in a single query. As a result, it minimizes the
1403. number of requests sent by the client to the server, which is a performance
1404. boost. Moreover, it proposes a single query format regardless of the data
1405. source</span>. Basically, it means that you can query data from an RDBMS or an LDAP directory almost identically, while getting a consistent response format. All good!<br />
1406. <div>
1407. <div class="MsoNormal">
1408. <span lang="EN"><br /></span></div>
1409. <div class="MsoNormal">
1410. <span lang="EN">To make the queries discoverable, it uses a schema to define the query parameters, the JSON result as well as the
1411. graph traversal links.  If this is appealing, it forces the server to implement
1412. these schemas before the queries can be emitted by the client. The whole data
1413. and navigation models have to be known and implemented up front. Hum, not only
1414. this slows down application prototyping, but it makes it hard to link
1415. micro-services that don't know about each other.  </span>It also does not work with truly dynamic services, like a JSON document store, where the document
1416. schema can be unknown.  Crap, this is exactly what Darwino
1417. offers. So the question is: can we still use GraphQL for dynamic services, where data  schema can be
1418. static, dynamic or a mix of both? I saw a few posts on the subject but no solution so far.<br />
1419. <span lang="EN"><br /></span></div>
1420. <div class="MsoNormal">
1421. <span lang="EN">Fortunately, GraphQL has the notion of an optional field alias. An alias renames a
1422. field, so it can appear multiple times in the same root. As a field can also have parameters, we can
1423. "tweak" the engine to implement dynamic field accessors. How? Simply
1424. by inverting the roles: the alias becomes the field name while the field
1425. is a dynamic, typed, JSON path evaluation on the source document. <o:p></o:p></span><br />
1426. <span lang="EN"><br /></span></div>
1427. <div class="MsoNormal">
1428. <span lang="EN">Ok, let me give you an example. Suppose that we have the following document
1429. as a source:<o:p></o:p></span></div>
1430. <span style="font-family: Courier New, Courier, monospace;">{<br />  name: "MyProject",<br />  budget: {<br />    amount: 10000,<br />    currency: "USD"<br />  }<br /> }</span><div class="MsoNormal">
1431. <span lang="EN">The dynamic query to extract the project name and the budget will be like:<o:p></o:p></span></div>
1432. <span style="font-family: Courier New, Courier, monospace;">{<br />  doc: Document(unid:"projectid", database:"project") {<br />    _unid,<br />    name: string(path:"$.name"),<br />    budget: number(path:"$.budget.amount")<br />  }<br /> }</span><div class="MsoNormal">
1433. <span lang="EN">'<span style="font-family: Courier New, Courier, monospace;">string</span>' and '<span style="font-family: Courier New, Courier, monospace;">number</span>' (as well as others, like <span style="font-family: Courier New, Courier, monospace;">boolean</span>...) are typed, pseudo field
1434. names that are actually evaluating JSON path queries on the source document.
1435. And because the path is passed as an argument, it can be fully dynamic! We are
1436. using JSON path here, but any interpreted language could be used, including JavaScript or others. Also note
1437. that the <span style="font-family: Courier New, Courier, monospace;">Document</span> accessor is also implemented as a field with parameters. This
1438. triggers the actual load of the JSON document from the database.</span></div>
1439. <div class="MsoNormal">
1440. <span lang="EN">How does that sound? You can find a real example dealing with the JSON
1441. store in the Darwino playground:<o:p></o:p></span></div>
1442. <div class="MsoNormal">
1443. <span lang="EN"><a href="http://playground.darwino.com/playground.nsf/GraphqlSnippets.xsp#snippet=Json_Store_Document_Read_Document_Fields"><span style="color: blue;">http://playground.darwino.com/playground.nsf/GraphqlSnippets.xsp#snippet=Json_Store_Document_Read_Document_Fields</span></a><o:p></o:p></span></div>
1444. <div class="MsoNormal">
1445. <span lang="EN"><br /></span>
1446. <span lang="EN">But this is not enough, as we also need to implement the links to navigate
1447. the graph. For example, we need to navigate to a JSON document by id, that id
1448. being a field in the current object. To make this possible, we introduce here the notion of computed parameter, using the <span style="font-family: Courier New, Courier, monospace;">${....}</span> syntax (remember JSF?).<o:p></o:p></span></div>
1449. <div class="MsoNormal">
1450. <span lang="EN">The pseudo query bellow assumes that you have tasks documents that can be
1451. accessed using the parent project id:<o:p></o:p></span></div>
1452. <span style="font-family: Courier New, Courier, monospace;">{<br />  doc: Document(unid:"projectid", database:"project") {<br />    _unid,<br />    name: string(path:"$.name"),<br />    budget: number(path:"$.budget.amount")<br />    tasks: Documents(parent:"${_unid}", database:"tasks") {<br />     taskname: string(path:"$.name"),<br />    }<br />  }<br /> }</span><div class="MsoNormal">
1453. <span lang="EN">The drawback of this solution is that every property becomes a string, to accept a formula. Another solution would duplicate all the fields and have, for example, <span style="font-family: Courier New, Courier, monospace;">parent$</span> as a computed version of <span style="font-family: Courier New, Courier, monospace;">parent</span>. As the whole library is under development, I'm not sure yet what's best, so any feedback is welcome!</span><br />
1454. <span lang="EN">Note that <span style="font-family: Courier New, Courier, monospace;">Documents</span> returns a collection of documents, as opposed to
1455. <span style="font-family: Courier New, Courier, monospace;">Document</span> that only returns one.<o:p></o:p></span><br />
1456. <span lang="EN"><br /></span></div>
1457. <div class="MsoNormal">
1458. <span lang="EN">Of course, this is a simple introduction to a schemaless implementation of
1459. GraphQL. There are more details, but it expands the GraphQL technology by
1460. making it more dynamic, while the retaining the static parts. Look, for
1461. example, at this snippets mixing static and dynamic attributes:<o:p></o:p></span></div>
1462. <div class="MsoNormal">
1463. <span lang="EN"><span style="color: blue;"><a href="http://playground.darwino.com/playground.nsf/GraphqlSnippets.xsp#snippet=Mixed_Document_join_on_User_Directory___Unid">http://playground.darwino.com/playground.nsf/GraphqlSnippets.xsp#snippet=Mixed_Document_join_on_User_Directory___Unid</a></span><o:p></o:p></span><br />
1464. <span lang="EN"><br /></span></div>
1465. <div class="MsoNormal">
1466. <span lang="EN">The early <a href="https://www.darwino.com/">Darwino</a> 2.0 code includes this capability in its Java based
1467. implementation, released as open source on <a href="https://github.com/darwino-org/Darwino-GraphQL">darwino.org</a>. Any GraphQL object can
1468. implement a specific interface that will give it the dynamic capability (json
1469. path...) on top of its static fields. If you go back to the previous example,
1470. you'll see that the document UNID is a static field specific to the Darwino
1471. JSON document.<o:p></o:p></span></div>
1472. <div class="MsoNormal">
1473. <br /></div>
1474. </div>
1475. There are more to discover, but hold on: if our session is accepted at <a href="https://engage.ug/">Engage 2017</a>, <a href="https://www.linkedin.com/in/paulswithers/">Paul Withers</a> and I will give more details on the implementation, along with an IBM Notes/Domino implementation!</div>
1476. </description><link>http://blog.riand.com/2017/03/schemaless-graphql.html</link><author>noreply@blogger.com (Philippe Riand)</author><thr:total>0</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-2067133848514555149</guid><pubDate>Fri, 17 Feb 2017 03:51:00 +0000</pubDate><atom:updated>2017-02-16T19:51:53.327-08:00</atom:updated><title>Get your apps integrated with IBM Connections, cloud and on-premises!</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1477. I've been using this blog to share some of the techniques we use in ProjExec to get tightly integrated with the Connections platform. I got a lot of feedback from developers who wanted to know more, so I'm moving a step further: <a href="https://frostillic.us/">Jesse Gallagher</a> and I will describe these techniques in a breakout session @Connect 2017!<br />
1478. <br />
1479. <blockquote class="tr_bq" style="text-align: left;">
1480. <b>DEV-1430 : IBM Connections Integration: Exploring the Long List of Options</b><br /><i>Program : Development, Design and Tools<br />Topic : Enterprise collaboration<br />Session Type : Breakout Session<br />Date/Time : Wed, 22-Feb, 10:00 AM-10:45 AM<br />Location : Moscone West, Level 2 - Room 2006<br />Presenter(s) : Philippe Riand, Triloggroup; Jesse Gallagher, I Know Some Guys, LLC</i></blockquote>
1481. <br />
1482. Basically, we'll show for both on the cloud and on premises Connections:<br />
1483. <br />
1484. <ul style="text-align: left;">
1485. <li>how to get your user authenticated by Connections, using OAuth or SSO</li>
1486. <li>how to call services in the behalf of that current user</li>
1487. <li>how to get your apps in the IBM Connection menu</li>
1488. <li>how to integrate the navbar, including on premises!</li>
1489. <li>how to share code common to community apps (cloud) and iWidget (on premises)</li>
1490. </ul>
1491. Beyond live code and demos, we will release a reusable library as open source, with all the necessary code to get your own Java based application integrated effortless. It will be available on <a href="https://www.darwino.org/darwino/">darwino.org</a>, a branch of <a href="https://www.openntf.org/">OpenNTF</a>.<br />
1492. <br />
1493. To make that possible, <strike>IBM helped by providing a long awaited ask</strike>,  Wait wait wait, I'm not going to reveal that here, but an <strike>IBMer will be on stage to explain</strike>. Wait again, should not talk about this neither, people have to come to the session!<br />
1494. <br />
1495. See you @Connect, and don't miss this session if you want to be an IBM Connections developer hero!<br />
1496. <br />
1497. <div class="separator" style="clear: both; text-align: center;">
1498. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBYpxQgiUgtqOcd4_Bwgnz0kdTt3NSVqynyLOQHA0R-EXF2OsgZErde_9ch0k0edPh-1IOFvnDFuIMB1gOxckod9tJ4idetiVf1s3ce0eIvHv-N3dHquth-4RSjhHMbO-2ZagSYR1gguY/s1600/connapp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBYpxQgiUgtqOcd4_Bwgnz0kdTt3NSVqynyLOQHA0R-EXF2OsgZErde_9ch0k0edPh-1IOFvnDFuIMB1gOxckod9tJ4idetiVf1s3ce0eIvHv-N3dHquth-4RSjhHMbO-2ZagSYR1gguY/s640/connapp.png" width="640" /></a></div>
1499. <br /></div>
1500. </description><link>http://blog.riand.com/2017/02/get-your-apps-integrated-with-ibm.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBYpxQgiUgtqOcd4_Bwgnz0kdTt3NSVqynyLOQHA0R-EXF2OsgZErde_9ch0k0edPh-1IOFvnDFuIMB1gOxckod9tJ4idetiVf1s3ce0eIvHv-N3dHquth-4RSjhHMbO-2ZagSYR1gguY/s72-c/connapp.png" height="72" width="72"/><thr:total>2</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-8496744837748528527</guid><pubDate>Thu, 26 Jan 2017 23:46:00 +0000</pubDate><atom:updated>2017-01-26T15:47:04.162-08:00</atom:updated><title>When SQL meets NoSQL, you get the best of both worlds!</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1501. At the heart of Darwino is an advanced, portable JSON document store, implemented on top of any relational database. I'm often being asked the following question "why did you implement that on top of an RDBMS?". Behind the scene, the real question is: "why are you not using MongoDB or another nosql database?"<br />
1502. <div>
1503. Well, I'm generally answering it with multiple arguments:</div>
1504. <div>
1505. <ul style="text-align: left;">
1506. <li>It leverages all the RDBMS well known capabilities: transactions, data integrity, security, backups, performance, reporting, analytics...</li>
1507. <li>Nowadays, RDBMS handle JSON natively, thus providing high performance access to any data in this format. </li>
1508. <li>Portability: it deploys on existing infrastructure, whenever it is cloud or on premises. Run your app on IBM Bluemix on top of DB2, or MS Azure on top of SQL Server... And on-premises, I don't know any organization that does not already have an RDBMS validated by the IT department. </li>
1509. </ul>
1510. </div>
1511. <div>
1512. But there is now another big reason: queries! This is another step in leveraging the native JSON support available in all major RDBMS.</div>
1513. <div>
1514. <br /></div>
1515. <div>
1516. From the beginning, Darwino comes with a JSON based, MongoDB like, query language. It fully abstracts the relational database details, by converting the JSON query into SQL for the target database. It hides the relational model and behaves exactly the same on every single relational database. Plus it adds IBM Domino like capabilities, including category records, response documents, full text search... Of course, it honors the document based security. So it is very powerful. You can see it in action <a href="https://playground.darwino.com/playground.nsf/DarwinoDbSnippets.xsp#snippet=Queries_-_SQL_Optimization_$and">here</a>.<br />
1517. <br />
1518. But it also has its own set of limitations. In particular, because it hides the relational model, it cannot take advantage of it. I'm thinking about joins, subqueries, unions... Remember, it is modeled over MongoDB and IBM Domino, which do not support these capabilities.</div>
1519. <div>
1520. <br /></div>
1521. <div>
1522. That's the reason why are introducing JSQL, which stands for JSON SQL. It complements the existing query language. In a nutshell, this is SQL targeting JSON document collections. Think a document collection as relational table, where each document is a row. The columns become <a href="http://goessner.net/articles/JsonPath/">JSON paths</a> on the documents.<br />
1523. <br /></div>
1524. <div>
1525. The beauty of implementing a NoSQL store on top of a RDBMS, is that you don't have to implement the SQL query engine yourself, but you can rely on the well proven underlying database. I don't know any NoSQL database that is just approaching what a mature SQL database can do in term of query. With behind it, decades of research and query optimization techniques that will be hard to re-implement! And finally, if a vendor does not give you entire satisfaction, then you can move to the next one. Frankly, isn't that more trustable than any proprietary NoSQL database, even open source?</div>
1526. <div>
1527. <br />
1528. Ok, back to JSQL. Let's start with a simple example. Suppose that you have a collection of JSON documents named 'Pinball'. Each pinball document has a few fields, like these:</div>
1529. <div>
1530. <span style="font-family: "courier new" , "courier" , monospace;">  { name: 'Revenge of Mars', manufacturer: 'Bally', ....}</span></div>
1531. <div>
1532. <br /></div>
1533. <div>
1534. A JSQL query to list all the pinball machines in the database would be:</div>
1535. <div>
1536. <div>
1537. <span style="font-family: "courier new" , "courier" , monospace;"> SELECT $.manufacturer as manufacturer, $.name as name </span></div>
1538. <div>
1539. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>FROM pinball</span></div>
1540. <div>
1541. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>ORDER BY $.manufacturer, $.name</span></div>
1542. </div>
1543. <div>
1544. <a href="https://playground.darwino.com/playground.nsf/JsqlSnippets.xsp#snippet=pinballs_Pinball_List_by_Name">Live example</a></div>
1545. <div>
1546. <br /></div>
1547. <div>
1548. Easy, isn't it? The syntax '<span style="font-family: "courier new" , "courier" , monospace;">$.a</span>' is actually a JSON path that extracts the field '<span style="font-family: "courier new" , "courier" , monospace;">a</span>' from the JSON document. It can obviously be more complex, like '<span style="font-family: "courier new" , "courier" , monospace;">$.x.y.z</span>', to extract hierarchical data.<br />
1549. Note that you can also get the whole JSON document with the simple '<span style="font-family: "courier new" , "courier" , monospace;">$</span>' JSON Path:</div>
1550. <div>
1551. <span style="font-family: "courier new" , "courier" , monospace;">  SELECT $ as doc from pinball</span></div>
1552. <div>
1553. <a href="https://playground.darwino.com/playground.nsf/JsqlSnippets.xsp#snippet=tutorials_Read_Pinball_Documents">Live example</a></div>
1554. <div>
1555. <br />
1556. Under the hood, Darwino parses the original JSQL query and generates the final query for the target RDBMS. For example, here is how the query above is converted to Postgresql:</div>
1557. <div>
1558. <div>
1559. <span style="font-family: "courier new" , "courier" , monospace;">  WITH TB1 AS </span></div>
1560. <div>
1561. <span style="font-family: "courier new" , "courier" , monospace;">    (SELECT *</span></div>
1562. <div>
1563. <span style="font-family: "courier new" , "courier" , monospace;">    FROM playground_DOC</span></div>
1564. <div>
1565. <span style="font-family: "courier new" , "courier" , monospace;">    WHERE STOREID='pinball'</span></div>
1566. <div>
1567. <span style="font-family: "courier new" , "courier" , monospace;">            AND INSTID='')</span></div>
1568. <div>
1569. <span style="font-family: "courier new" , "courier" , monospace;">  SELECT<br />    jsonb_extract_path_text(JSON,</span><span style="font-family: "courier new" , "courier" , monospace;">'manufacturer')::text AS manufacturer,</span></div>
1570. <div>
1571. <span style="font-family: "courier new" , "courier" , monospace;">    jsonb_extract_path_text(JSON,'name')::text AS name</span></div>
1572. <div>
1573. <span style="font-family: "courier new" , "courier" , monospace;">  FROM TB1</span></div>
1574. <div>
1575. <span style="font-family: "courier new" , "courier" , monospace;">  ORDER BY<br />    jsonb_extract_path_text(JSON,'manufacturer')::text,<br />    jsonb_extract_path_text(JSON,'name')::text</span></div>
1576. </div>
1577. <div>
1578. <br /></div>
1579. <div>
1580. The JSQL queries can be as complex as the database supports: it includes clauses like WHERE, ORDER BY, GROUP BY/HAVING, any JOIN, subqueries, functions, aggregation, UNION... Again, anything supported by the underlying database can be used. Also, during the conversion step, Darwino hides as much as possible the SQL differences between the database vendors. It even works on mobile devices on top of SQLite!<br />
1581. <br /></div>
1582. <div>
1583. Here is, another example: a query joining 3 document collections: pinballs, owners and a relation (owns) between the pinballs and the owners:</div>
1584. <div>
1585. <div>
1586. <span class="Apple-tab-span" style="font-family: "courier new" , "courier" , monospace; white-space: pre;"> </span><span style="font-family: "courier new" , "courier" , monospace;">SELECT O.$.firstName firstname, </span></div>
1587. <div>
1588. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>   O.$.lastName lastname,</span></div>
1589. <div>
1590. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>   P.$.brand brand,</span></div>
1591. <div>
1592. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>   P.$.name name</span></div>
1593. <div>
1594. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>FROM owners O</span></div>
1595. <div>
1596. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;">  </span>LEFT OUTER JOIN owns R ON R.$.owner=O._unid</span></div>
1597. <div>
1598. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;">  </span>LEFT OUTER JOIN pinball P ON R.$.ipdb=P._unid</span></div>
1599. <div>
1600. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>ORDER BY firstname, lastname</span></div>
1601. </div>
1602. <div>
1603. <a href="https://playground.darwino.com/playground.nsf/JsqlSnippets.xsp#snippet=pinballs_Pinballs_and_Owners">Live example</a></div>
1604. <div>
1605. (The field syntax <span style="font-family: "courier new" , "courier" , monospace;">_xyz</span> allows access to the document meta-data, stored outside of the JSON document. It includes the document unid, the creation date...)<br />
1606. <br />
1607. Another one? What about a subquery to find the most expensive pinball:<br />
1608. <span style="font-family: "courier new" , "courier" , monospace;">  SELECT P.$.name name, P.$.manufacturer manufacturer,</span>        <span style="font-family: "courier new" , "courier" , monospace;">P."$.value"::number "value"</span><br />
1609. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>FROM pinball P,</span><br />
1610. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>(SELECT MAX("$.value"::number) val FROM pinball) MT</span><br />
1611. <span style="font-family: "courier new" , "courier" , monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>WHERE P."$.value"::number=MT.val</span><br />
1612. <a href="https://playground.darwino.com/playground.nsf/JsqlSnippets.xsp#snippet=alexa_What_Is_The_Most_Expensive_Pinball">Live Example</a><br />
1613. (Because there is no JSON schema, any JSON path is assumed to be a string by default. Darwino supports the <span style="font-family: "courier new" , "courier" , monospace;">::</span> cast operator to specify other data types, like <span style="font-family: "courier new" , "courier" , monospace;">::number</span>)<br />
1614. <br />
1615. It, of course, preserves the document based security (a.k.a. readers/editors). Look at this <a href="https://playground.darwino.com/playground.nsf/JsqlSnippets.xsp#snippet=tutorials_Read_Pinball_Document_With_Security">example</a>, and you'll see that the generated SQL is decorated with the proper security condition on the reader fields.<br />
1616. <br />
1617. Thinking even further, we can provide a JDBC driver that will allow any JDBC client, like report engines, to connect to the database, while preserving the whole security model! For the record, I already created such a remote JDBC driver for <a href="https://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=JDBC%20Access%20for%20IBM%20Lotus%20Domino">DomSQL</a>, so it would be easy reuse this piece of code.<br />
1618. <br />
1619. This feature is still under development but can be previewed in the Darwino 2.0 code stream, and live from the Playground. Hope you guys like it, and see the value of having an RDBMS behind the scene! Any feedback is more than welcome.<br />
1620. <br /></div>
1621. <div>
1622. BTW, I'm a fan of Pinball machines, and so are my friends at <a href="https://en.webgate.biz/">WebGate</a>. :-) I can show you my pinball database, augmented with AI, at <a href="http://www-01.ibm.com/software/collaboration/events/connect/">Connect 2017</a>. See you at booth #630 in the showcase.</div>
1623. <div>
1624. <br /></div>
1625. <div>
1626. <br /></div>
1627. </div>
1628. </description><link>http://blog.riand.com/2017/01/when-sql-meets-nosql-you-get-best-of.html</link><author>noreply@blogger.com (Philippe Riand)</author><thr:total>1</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-7663859798827800977</guid><pubDate>Wed, 25 Jan 2017 21:25:00 +0000</pubDate><atom:updated>2017-01-25T13:25:04.752-08:00</atom:updated><title>ReactJS or AngularJS? What about something else?</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1629. So far, ProjExec has been a really good citizen in the IBM/ICS world as we tried to reuse the core Connections stack as much as can (Dojo, OneUI, ...). But these technologies start to age while the browser technologies evolved a lot in the past years: what required a whole bunch of JavaScript using Dojo/JQuery can now be squeezed in a few lines using new libraries! It is time to change gears.<br />
1630. <br />
1631. We started to look at what technology would better fit our needs. The main requirements are:<br />
1632. <ul style="text-align: left;">
1633. <li>Make the developers productive - easy to integrate new developers</li>
1634. <li>Have a decent performance when the application grows - ProjExec is large!</li>
1635. <li>Can integrate with the existing code, and be used incrementally within ProjExec</li>
1636. <li>The tool chain should integrate well with what we currently use (Maven, Eclipse...)</li>
1637. <li>Can be debugged easily, with mean full logs</li>
1638. <li>Have a eco-system with ready to use libraries (bootstrap, mobile, ...)</li>
1639. </ul>
1640. We already started to use AngularJS 1.x 2 yrs ago for some new modules. The initial steps were pretty easy, although it started to be more difficult when the complexity increased. And anyway, we know that AngularJS 1 is behind us. We cannot decently bet our future on it.<br />
1641. <div>
1642. <br /></div>
1643. <div>
1644. The natural next move was to use Angular 2, as it fixes most of the issues found in 1.x. I would say this is true, but the learning curve grew significantly. That includes some technology choices (ex: Observable vs Promises), Typescript, the tool chain required to get an application properly packaged, and the heaviness of the resulting code... I spent time playing with it for Darwino (we'll release some examples), but I do not see the ProjExec developers being quickly productive with it. This has been further confirmed by one of my friend, a GDE (Google Developer Expert, the equivalent of IBM Champion): his one week training class is barely sufficient to get the developers comfortable. Also, getting it integrated in a venerable existing application raises some challenges.<br />
1645. Ok, we'll might use it later with Ionic 2 for a dedicated mobile UI, but for now, let's look if something easier can be used on the existing web application.</div>
1646. <div>
1647. <br /></div>
1648. <div>
1649. The next candidate on the list is Facebook's ReactJS. Clearly, there is a buzz around this technology. It has very interesting concepts, it creates high performance applications. But the initial learning curve is even bigger than Angular's, particularly for Java developers. Moreover, it is pretty low level, which provides great flexibility but you then have to choose the proper companion libraries.<br />
1650. We'll keep this in the back burner, let's look is something else better suits our needs.<br />
1651. <br />
1652. Finally, we discovered that another library got a lot of traction last year: it is called Vue.js (<a href="https://vuejs.org/">https://vuejs.org/</a>). After a first look at it, it feels like what I hoped Angular 2 would be! Ok, I bought 2 books from <a href="https://www.packtpub.com/web-development/majesty-vuejs">Packt ($5 each)</a>, got the source code from Github and started my deep learning. It features exactly what we need:<br />
1653. <ul style="text-align: left;">
1654. <li>Easy learning curve, particularly when you have some Angular 1 background. Anyway easier than Angular or React</li>
1655. <li>You don't need a whole set of tools/CLI to be in place up front. Just include the single JS file and you can get started. It happens that we'll finally use Webpack, but this was not a requirement from the beginning.</li>
1656. <li>It fixes many of the problems/inconsistencies found in Angular JS 1.x (bind vs values, separation of concerns, single file components...)</li>
1657. <li>It easily integrates within existing applications, regardless of what they already use (Dojo, JQuery, ...), even if they are not designed as SPAs</li>
1658. <li>It performs as good as ReactJS. Moreover, if you're a JSX fan, it is available as well</li>
1659. <li>It is very lightweight and non intrusive</li>
1660. <li>Developer's productivity feels superior to ReactJS</li>
1661. <li>A good set of tools/libraries/docs is available <a href="https://github.com/vuejs/awesome-vue">https://github.com/vuejs/awesome-vue</a></li>
1662. <li>See how it compares to the other libraries: <a href="https://vuejs.org/v2/guide/comparison.html">https://vuejs.org/v2/guide/comparison.html</a></li>
1663. </ul>
1664. We decided to go with it. The early feedback I got from the development team is very positive. We'll see in the longer run if it keeps its promises, but so far so good.</div>
1665. <div>
1666. <br /></div>
1667. <div>
1668. I'll be interested to hear anybody else experience. Please feel free to comment.</div>
1669. <div>
1670. <br /></div>
1671. <div class="separator" style="clear: both; text-align: center;">
1672. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTUY-6It6NpgjJN6Y9RGA3x0ryI_xyYiRVTtqt08g_Va9VnSolDDXstcOJ9erlhJHjuioZ9HEdZrUS1aNQYg-w4I9-aN1QgHzVcU_MGmH5KouoFiyjf0EExTZX9oHhjDzZ0a7vdhQ1s_I/s1600/vuelogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTUY-6It6NpgjJN6Y9RGA3x0ryI_xyYiRVTtqt08g_Va9VnSolDDXstcOJ9erlhJHjuioZ9HEdZrUS1aNQYg-w4I9-aN1QgHzVcU_MGmH5KouoFiyjf0EExTZX9oHhjDzZ0a7vdhQ1s_I/s200/vuelogo.png" width="200" /></a></div>
1673. <div>
1674. <br /></div>
1675. </div>
1676. </description><link>http://blog.riand.com/2017/01/reactjs-or-angularjs-what-about.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTUY-6It6NpgjJN6Y9RGA3x0ryI_xyYiRVTtqt08g_Va9VnSolDDXstcOJ9erlhJHjuioZ9HEdZrUS1aNQYg-w4I9-aN1QgHzVcU_MGmH5KouoFiyjf0EExTZX9oHhjDzZ0a7vdhQ1s_I/s72-c/vuelogo.png" height="72" width="72"/><thr:total>11</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-2760493133028578028</guid><pubDate>Tue, 03 Jan 2017 16:53:00 +0000</pubDate><atom:updated>2017-01-03T08:53:35.942-08:00</atom:updated><title>Why AngularJS sounds familiar to XPages developers...</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1677. When I started to look at AngularJS a few years ago, I surprisingly found myself quickly comfortable with this technology. One of the reason is that many of its concepts are shared with XPages.  Of course, there are fundamental differences, the most obvious being AngularJS a pure client technology while XPages, based on JSF, is a server side one. But still, they share a lot! If you know XPages, your experience understanding AngularJS should be similar to mine. I'm basing my experience on  AngularJS 1.x, although it is also applies to 2.0. 2.0 is even closer to Java programmers with the use of TypeScript and new concepts familiar to Java developers (classes, ...). But this is a different topic.<br />
1678. <br />
1679. <div>
1680. Let me dive into the similarities between the 2 frameworks:<br />
1681. <div>
1682. <div>
1683. <br /></div>
1684. <div>
1685. 1- The Document Object Model (DOM) as the page content</div>
1686. <div>
1687. If it is obvious that Angular works on top of a DOM, but XPages is also working on a DOM. If AngularJS leverages the browser HTML DOM, XPages manages an hierarchy of JSF components. Both are hierarchical, with a parent-children relationship, and represent the content of the page. </div>
1688. <div>
1689. <br /></div>
1690. <div>
1691. 2- Contextual data</div>
1692. <div>
1693. Angular calls that a scope, which is data assigned to a DOM element and its children. If this concept does not exist in the JSF spec, XPages provides it through "complex properties" like data sources, or even the "context" object that lets developers add data to a component and its children.</div>
1694. <div>
1695. <br /></div>
1696. <div>
1697. 3- Scripts and formulas</div>
1698. <div>
1699. Obviously Angular uses JavaScript as its scripting language, similarly to XPages, plus a JavaScript based formula language for expression evaluation. XPages also uses the JSF EL for basic expression</div>
1700. <div>
1701. <br /></div>
1702. <div>
1703. 4- Data binding</div>
1704. <div>
1705. Angular does data binding either through attributes to the DOM elements, or expressions within curly braces <span style="font-family: "courier new" , "courier" , monospace;">{{...}}</span>. Well, XPages does kind of the same thing with value binding expressions, <span style="font-family: "courier new" , "courier" , monospace;">${...}</span>or <span style="font-family: "courier new" , "courier" , monospace;">#{...}</span></div>
1706. <div>
1707. <br /></div>
1708. <div>
1709. 5- Directives or components</div>
1710. <div>
1711. Angular does great job extending your browser HTML with directives. In short, you can create your own tags (or even attributes one can use on existing tags). XPages does the same with custom controls, adding new tags to the XML describing the page.<br />
1712. <br />
1713. 6- Managed beans<br />
1714. Angular uses services, JSF has managed beans to externalize the business logic outside of the page. In both cases, you access the object by its name, using dependency injection for Angular, or faces-config.xml for XPages.</div>
1715. </div>
1716. <div>
1717. <br /></div>
1718. <div>
1719. Of course, there are real differences. One of them is the processing model, as XPages is running well known phases while Angular uses an event based model, with a queue of events. But still, as an XPages developer, you'll feel at home pretty quickly when writing an application.<br />
1720. <br />
1721. How about Angular 2.0? Well we are currently experimenting with it and I'll share my findings in a little while.<br />
1722. <br />
1723. <br /></div>
1724. <div>
1725. <div class="separator" style="clear: both; text-align: center;">
1726. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYY29sbo9Uy_0JlSI-IIREhiIz6Sbz3OA8fZ25_ylBOPGws0ApYyrimgsrRAVFpBT35aaLT_h8eCGPuRrNVNPieCUKZ_iDI-7WcfLzVwdekeaiXmgBHBUBHLYX2ExvxOzEMCLnwYSCg0/s1600/angularjs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYY29sbo9Uy_0JlSI-IIREhiIz6Sbz3OA8fZ25_ylBOPGws0ApYyrimgsrRAVFpBT35aaLT_h8eCGPuRrNVNPieCUKZ_iDI-7WcfLzVwdekeaiXmgBHBUBHLYX2ExvxOzEMCLnwYSCg0/s1600/angularjs.png" /></a></div>
1727. <br /></div>
1728. </div>
1729. </div>
1730. </description><link>http://blog.riand.com/2017/01/why-angularjs-sounds-familiar-to-xpages.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYY29sbo9Uy_0JlSI-IIREhiIz6Sbz3OA8fZ25_ylBOPGws0ApYyrimgsrRAVFpBT35aaLT_h8eCGPuRrNVNPieCUKZ_iDI-7WcfLzVwdekeaiXmgBHBUBHLYX2ExvxOzEMCLnwYSCg0/s72-c/angularjs.png" height="72" width="72"/><thr:total>4</thr:total></item><item><guid isPermaLink="false">tag:blogger.com,1999:blog-7557605395826374162.post-2281323735818327635</guid><pubDate>Thu, 22 Dec 2016 23:08:00 +0000</pubDate><atom:updated>2016-12-22T15:08:31.280-08:00</atom:updated><title>The king is dead, long live to the new iOS Java king!</title><description>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
1731. When presenting <a href="https://www.darwino.com/">Darwino</a>, I'm often asked the question how do we run Java natively on iOS, or other platforms that are not known to be Java friendly? Well, we started this journey a few years ago, but the landscape of cross platform Java evolved a lot since that. Let me go through the history and explain where we stand now, as a new king has just been proclaimed. If you thing the story is too long, then just go to <a href="https://multi-os-engine.org/">Multi OS Engine</a> for the answer.<br />
1732. <br />
1733. Back to the dark age, the most promising solution was provided by Google, through a <a href="https://en.wikipedia.org/wiki/Source-to-source_compiler">transpiler </a>called <a href="http://j2objc.org/">J2OBJC</a>. Basically, j2objc converts the Java source code to Objective-C source code, that can later be compiled using Apple XCode as any native Objective-C application. Google is successfully using this technology internally for a set of projects, including popular ones like Inbox. With this, along with <a href="http://www.gwtproject.org/">GWT</a>, they claim that 70% of the code is shared between Android, iOS and the web. This is more than decent, but it has some issues:<br />
1734. <ul style="text-align: left;">
1735. <li>It works at the source code level, while most of the libraries are currently provided as compiled binaries, through a maven reposioty</li>
1736. <li>The runtime libraries (e.g. the set of classes available at runtime, like java.io.*, java.net.*...) is a small subset of the standard JRE libraries. That limits what you can use in your application. Even if you pay attention to only use the less common denominator, it prevents you from using libraries depending of the missing pieces</li>
1737. <li>Objective-C (and Swift) memory management. While Java uses a garbage collector, Objective-C uses references count. I can write a whole article on the pros and cons on each of them, but the fact is that Java memory management does not translate properly to Objective-C, leading to hard-to-debug issues</li>
1738. <li>Finally, it does not provide an easy access to the native APIs like Cocoa, or even JNI (which we use for to access SQLite, for example)</li>
1739. </ul>
1740. Ok, despite the all the great things it carries, j2objc didn't fit with our objective of "write once, run everywhere".<br />
1741. <br />
1742. Fortunately, a beta from a new product called <a href="https://robovm.com/">RoboVM </a>appeared soon after. It was not a transpiler but a real compiler that generates true native code from the Java classes. It removed most the limitations of j2objc, by bundling the Android runtime class libraries (minus the specific UI classes), giving access to the whole iOS API through a Java-to-native bridge, full support of JNI... With RoboVM, we migrated our existing Android applications to iOS in a few hours.<br />
1743. Another tool, called <a href="https://www.migeran.com/">Migeran</a>, was also emerging with a very similar value proposition. We also moved our apps to Migeran. But, after talking to both teams, we decided to go with RoboVM, mostly because RoboVM was <a href="https://github.com/robovm">open source</a> (well, partly). By the meantime, Migeran was acquired by Intel to extend their <a href="https://software.intel.com/en-us/intel-inde">INDE </a>offerings. They called it Multi OS Engine, aka MOE . That reinforced the validity of our choice.<br />
1744. <br />
1745. But we knew that RoboVM was also a potential target for an acquisition. And what had to happen happened. Xamarin, the .NET based competitor, acquired it and changed the rules: raised the price up, stopped to deliver to the open source project... Without any inside knowledge of the acquisition terms, I believe that the Xamarin move to Java was not to make the Java community happier, but to awake and fear its main supporter: Microsoft. Which quickly reacted by acquiring Xamarin a couple of months later, and just killed RoboVM. Man, we are orphan!<br />
1746. <br />
1747. One of the solution was to restart from the open source version of RoboVM, and contribute enhancements. Actually, there is a team of knowledgeable <a href="https://libgdx.badlogicgames.com/">LibGDX </a>developers that cleaned-up the code (see: <a href="https://github.com/MobiDevelop/robovm">https://github.com/MobiDevelop/robovm</a>) and maintains it. That was the best place to start from. We even contributed the maven plug-in, thanks to Jesse. But the effort to make this project an enterprise grade tool is still big. It misses a decent debugger, support of LLVM and a few other things. Despite the value of the people behind it, it lacks the support of a real organization dedicating resources to its development.<br />
1748. <br />
1749. But events are often chained. Another long awaited event happened: Intel decided to release MOE as an open source project. More than that, they gave the leadership back to the original creator, Migeran! That's the difference between Intel and Microsoft: instead of just killing and erasing the project, they decided to give it for free to the community. Many thanks to you Intel, you deserve it!<br />
1750. <br />
1751. This changed the game for us. Instead of investing in the opensource RoboVM, we decided to move to MOE. The switch was actually easy, as the two tools are close enough. We made sure with Migeran that what we need is part of the platform, for example Eclipse and Maven support. Clearly, this team is great and they got the features in very quickly. As a result, since Darwino 1.5.0, we moved to the latest MOE 1.2.x and it appears to be very stable. We now have the same experience we had with the commercial version of RoboVM, including a full debugger! Yes, you can debug the Java code you deployed to your device.<br />
1752. Moving forward, we'll support whatever comes from Migeran: 1.3 is currently in a beta state, while 2.0 with come with a bunch of great new features. In particular the support of LLVM, latest ART runtime, maybe native windows support... Well the dream comes true.<br />
1753. <br />
1754. Last but not the least, we have great relationship with Migeran and in particular its CTO, the mighty Gergely Kis. Man, this guy is really skilled and he knows what he talks about. We had another opportunity to talk face to face last month, as he came to the first Darwino workshop in Germany. It came out that we are very aligned on the vision, so the future looks very promising. We also exchanged on future projects, like bringing a Java based, fully portable ReactNative to mobile devices.<br />
1755. <br />
1756. For more information about MOE now and future, Gergely gave us a presentation during the darwino workhop. The slides are now available on slideshare: <a href="http://www.slideshare.net/migeran/moe-cross-platform-mobile-apps-in-java?qid=cb244ace-ae2f-448d-9482-83ee5fba51e0&v=&b=&from_search=2">Slides</a><br />
1757. <br />
1758. If you are a Java developer who'd like to develop for iOS, then MOE is definitively what you're looking for. Start from <a href="https://multi-os-engine.org/">Multi Os Engine</a> web site, install the studio and enjoy.<br />
1759. <br />
1760. <br />
1761. <div class="separator" style="clear: both; text-align: center;">
1762. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSeYP1ArQ29QcTNIWCWPwXdiiv_Sg0AhQL9UN6uK4x3SUltBh9-UK0gP9koapi5a5Lcwtv35bRIHb-Ex0wKwjQ7GF7m0x5OHFevy66hgu92EehomCEFy_QSvW8Yd_C_PKQ9eTCnIvd0pY/s1600/moe-logo-45x45.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSeYP1ArQ29QcTNIWCWPwXdiiv_Sg0AhQL9UN6uK4x3SUltBh9-UK0gP9koapi5a5Lcwtv35bRIHb-Ex0wKwjQ7GF7m0x5OHFevy66hgu92EehomCEFy_QSvW8Yd_C_PKQ9eTCnIvd0pY/s1600/moe-logo-45x45.png" /></a></div>
1763. <br />
1764. <br /></div>
1765. </description><link>http://blog.riand.com/2016/12/the-king-is-dead-long-live-to-new-ios.html</link><author>noreply@blogger.com (Philippe Riand)</author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSeYP1ArQ29QcTNIWCWPwXdiiv_Sg0AhQL9UN6uK4x3SUltBh9-UK0gP9koapi5a5Lcwtv35bRIHb-Ex0wKwjQ7GF7m0x5OHFevy66hgu92EehomCEFy_QSvW8Yd_C_PKQ9eTCnIvd0pY/s72-c/moe-logo-45x45.png" height="72" width="72"/><thr:total>2</thr:total></item></channel></rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

1. Download the "valid RSS" banner.

2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

3. Add this HTML to your page (change the image src attribute if necessary):

   <a href="http://www.feedvalidator.org/check.cgi?url=http%3A//blog.riand.com/feeds/posts/default%3Falt%3Drss"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//blog.riand.com/feeds/posts/default%3Falt%3Drss

Home · About · News · Docs · Terms