I've heard about Windows Runtime Components, but seems like they are not applicable to UI components. Is it possible to create cross platform UI component (for example C#+xaml based component) which will run across all the projections C#, C++, javascript? I know projections are very different and need special environment to run, but if it's possible to create hybrid non-UI components maybe it's possible to create cross-platform UI components.
You can create components which expose UI to XAML apps, but you cannot create components which expose UI to JS applications - that's because the JS UI stack is dramatically different from the XAML rendering stack.
Related
Kontext
Vue 3 provides a way to create "Custom-Elements": https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue
The idea as far as I understand it, is to create Custom Elements, that can be used anywhere, as a Web component.
Here (https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue) the developers specifically recommend using custom elements for component libraries.
Environment/Motivation
A client has a bigger UI Project that is based on other frameworks. He wants to switch to vue, but doesn't have the resources to completely rewrite/replace everything with a normal vue application. Therefore he wants to replace everything step by step by using webcomponents or more specifically, vue-components (with all the advantages of vue) that are compatible with his project.
Problem
The custom elements don't have global vue instance, because you don't mount a custom element, rather you mount a vue application.
However many libraries and packages like i18n, primevue, vuetify, (vuex), ... assume, that they are used in a global instance. At least their documentation requires adding them to the global app instance, otherwise, various features don't work.
Question
How can I use libraries that require a global vue instance to work, in the context of multiple custom elements?
Implicit Expectation
As a developer, I assumed, that major libraries like the ones I mentioned work for custom elements as well. I know that this requires each element to include a small "app instance", which I would guess could lead to performance issues.
For E.g. you create a Website with 100 custom elements with each having an app instance.
If these performance issues I worry about are not essential, then I still could create a classic Webcomponent where I mount a vue app on it. (Following this comment, which I tested and it worked with some adjustments: https://github.com/vuejs/vue-web-component-wrapper/issues/93#issuecomment-909136116)
I have been using DOJO in Case manager. Do we really need to use DOJO for customization. The coding is similar to Javascript. Is the any relation between DOJO and javascript. What is the difference
Dojo (or more formally Dojo Toolkit) is a framework for developing JavaScript applications similiar to React or Vue.js.
It is (or least was) the framework of choice by IBM for the Web UI development for their Enterprise Content Management/Digital Business Automation (at least for IBM Content Navigator, Case Manager, FileNet and the IBM Content Collector for SAP UIs).
It provides reusable general components (Widgets) for UI and in the case of the Case Manager specialized Widgets to work with the Case Manager system (such as the data model etc).
While customizing and extending Case Manager you write JavaScript with some syntax for class/module loading specific to the Dojo Toolkit.
So there is really no difference between using JavaScript or the Dojo Toolkit.
As for the question if you have to use the Dojo Toolkit, the answer must be yes, although sometimes you will get away with vanilla JavaScript, but most of the time you will need to use the Dojo Toolkit (or the JavaScript libraries provided by IBM Case Manager).
At least for the IBM Content Navigator there is some ongoing effort to integrate React respectively replace the Dojo Toolkit with React. But I doubt, that this will happen anytime soon, especially for Case Manager.
At our company we have several React Native components built for iOS. They are all JavaScript based components, so they should work under React Native for Android also. Also, most of the components we have should only differ in the design style, so we need to code those differences between both platforms.
What's the right way to enable this components to support Android? Do we have to use if's checking the app Platform and change the style accordingly? If we want to separate the components in two files, Component.android.js and Component.ios.js, is React Native going to automatically detect which one it needs to use depending on the platform it's running?
There is a very simple solution which I prefer. Just use the file extension: .ios. vs .android.
E.g. look at my nav. I use the android toolbar in the android nav and then I can use navigatorIos for ios if I wish. The application platform will correctly load the corresponding platform file just based on the extension. Which means I just load it normally:
var Nav = require('./jsx/Nav');
I like to follow a declarative approach that React talks about, thus:
1) organizing your files would be by function/behaviour and not by platform as the same file with different extensions will be next to each other.
2) Whether platform to be explicit or implicit isn't relevant as you will only split the file into extensions when it's different platform specific components (so this is inherent)
3) Never any need to handle different platform(s) behaviour in your code ever.
4) This is a composition solution as I've already mentioned: files that are cross-platform do not need the platform extension (and might not need an abstract class for extension in some cases even).
This is a simple solution and I do not know how well it would scale for large projects; but I'm all for the declarative simplicity about it.
1. Organize them
Some components will be IOS-only, some will be Android-only, and some will be cross-platform.
I place my components into 3 directories:
/common/components/
/android/components/
/ios/components/
2. Decide whether you want platform to be explicit or implicit
For every component, there are two basic approaches:
Have the parent manage the platform via composition (i.e. parent selects which component to render and/or passes the platform into the children)
Delegate the platform rendering to the child (i.e. child figures out what platform it's on and renders itself accordingly).
The right approach depends on how different your IOS vs Android layout, style, and functionality are. If the two platforms have different layouts and features, you will likely favor the composition approach. If your code is really isomorphic across platforms then you will likely favor delegation.
3. For trivial differences, use if or switch
If the differences between IOS and Android flavors are purely stylistic (e.g. different style sheet), then you can use a simple if to retrieve the right style.
4. For more significant differences, use inheritance and composition for better modularity
If you have a component which has significant differences between IOS and Android (e.g. <MyCameraWidget>), then you might use a base <BaseCameraWidget> and then have <CameraWidgetIOS> and <CameraWidgetAndroid> variants which extend the base component. This properly separates the cross-platform from the platform-specific logic for better component maintainability later on.
The variants may live in different files, or in the same file, depending on whether you want to expose them or not.
If you are using delegated platform rendering, you will likely want to create a <CameraWidget> facade which has the simple task of figuring out what plaform its on and rendering the correct <CameraWidgetIOS> or <CameraWidgetAndroid> component.
Finally, read this Facebook article on adjustments you may want to make with the React Native packager. There is a blacklist feature which allows you to block out android or IOS files for different builds, but as of today that feature is undocumented and potentially not yet released.
I'm already familiar with Knockout, Angular, Sammy, jQuery, a little breeze, and a little ember. The tutorials and getting started for Durandal all seem to be saying... well first add jQuery and maybe knockout.
Does it handle something entirely different than all of these?
What need does it address such that it is likely to be used with knockout?
Is it just a hodgepodge of client side routing and ui components?
What does it do on its own conceptually?
Durandal is similar to Angular in that it provides a MV* framework for client-side SPA web applications.
Angular is mostly, if not all, custom code, whereas Durandal takes existing libraries, mainly Knockout and RequireJS (Sammy dependency has been obviated with the 2.0 release), and provides the plumbing to provide full SPA functionality, including view/view model composition and hash-tag (spa) navigation.
As for Knockout, Durandal relies heavily on Knockout to compose the views and view models. Your view and view model are automatically data-bound when the view is injected into the DOM. The advantage to this is that I can use Knockout to provide the V/VM data-binding, and let Durandal do the work of figuring out which v/vm to use, retrieving it from the server, and composing it into the current screen.
Restated, Durandal provides a way to map views/view models to hash-tag based routes, which give you the SPA navigation. By specifying a shell, or layout, view as the main view, a placeholder can be added which Durandal uses to implement what is basically a "screen presenter" pattern. Durandal listens to the URL changes, and can automatically activate, data-bind (using Knockout), and display the view that matches the current URL route.
If you're familiar with WPF, you may think of Durandal as providing Prism-like functionality as its main offering, along with other goodies designed to support building single-page-applications for the web.
Durandal has several benefits, but also builds on existing libraries. It has a dependency on
RequireJS
Knockout
jQuery
These are not "maybes." They are hard dependencies. Durandal cannot work without them.
At it's core, Durandal add's the very powerful compose binding to knockout. This binding will automatically locate the view (an HTML file) when passed a viewmodel, retrieve it from the server, bind it to the viewmodel, and insert them into the DOM. Similar behavior can be achieved using the knockout template binding, but managing the templates can become cumbersome. Composition also adds lifecycle events to the process, which can help ensure that viewmodels are setup and torn-down correctly. It also provides optional DOM caching.
Durandal also provides some framework structure. It provides a simple plugin API, which is used by its router to give SPA navigation via hash or push-state. It encourages the organization of viewmodels and views by overridable convention, as well as the use of Require AMD modules. It also provides a simple event module to allow application wide events to be created and consumed.
Durandal is a "full featured" SPA framework, whereas Knockout is just data-binding. It is similar in scope to Angular.
Magento 2 stand on Knockout and RequireJS.
Durandal can be added on top of it so more possibility come with use latest features (components, templates etc).
It is better because:
it is more stable and major than other framework, less errors occur
great documentation
simple api
more SEO friendly! (you can have all html seved and use it like component, mixed situation). Angular 2 stand on mixing logic with presentation.
html5 standard data and binding with better code redability (just try read html in react)
still maintained
creator of Durandal was for some time Angular Developer (3 month) so there is some similarity going on there in thinking.
Work in old browser ! (IE6 >)
There also cons but mainly because it don't give so much function in one pack and not newly, cutting edge technology, was adopted.
Pleas share more point about Durandal :)
More there: https://johnpapa.net/compare-durandal-to-angular-not-knockout-to-angular/
I'm looking into porting an existing enterprise app to iPad. One of the key requirements is that there is a basic functioning app that needs to be highly customizable/extensible. Also, the people working on the customizations and extensions are not part of the product team and do not have access to the base product's code (only interfaces, docs and the binaries). To achieve this, the current application uses a component based architecture where well defined components are used to compose the UI. For a given customer any of these components can be either extended and used instead of the out of the box ones or simply swapped with a new component that adheres to the interface.
Are there libraries in cocoa-touch that support a component model architecture ? (composing the app through a registry/configuration that can easily edited by others than the team developers)
Sebi
Perhaps you can create a root view controller and inject polymorphic children with: https://github.com/jasperblues/Typhoon