Webapp UI package - javascript

I'm creating a single page javascript webapp. If I want to make an app like this:
What is an ui package that could get me closest there?

Look into Ext-JS. It should be possible to desing the above webpage using it. Although its basically javascript but involves a not-ignorable learning curve. Though nowadays, they provide an awsesome documentation and you can get many basic examples on the web.

Related

What exactly is required in order to create custom WebChat for Twilio Flex?

I would like to understand how exactly I would go about creating a completely custom webchat for a website.
The reason why is because I realize that there are some limits to the degree to which I can customize the WebChat that is out-of-the-box, especially using JS alone.
I went about viewing the instructions for how to setup WebChat using the instructions, and I was just not able to figure out how to use the npm approach, only the CDN (using asp.net core and a separate website is using Wordpress). which sort of limited the degree to which I could make customizations to the UI.
I really wish I was able to use the npm package, but unfortunately the two web frameworks that the sites were build with (asp.net core, and WordPress) didnt have a clear way of accomplishing this. I posted about this issue previously with someone just saying "Its easy, just search online" . My search didnt result in anything helpful, unfortunately.
If someone can provide us engineers interested in making tweeks with clear instructions or an example of using javascript alone to add/remove components, I wouldnt have to build the web chat from scratch. There is just very limited documentation I feel for this. It almost appears that the app needs to be a react app, just to host the webchat if trying to customize using the extensibilty options twilio flex team provided.
Any insight is appreciated. What I am expecting is someone saying "Unfortunately, completing customizations using NPM is only available if the web framework is react based". or something like that. Is this true or false? If it is false, how exactly can I replace a component using javascript alone?

Flutter and Openlayers - including js libraries in flutter

Coming from the js/cordova based cross-platform universe, I am digging into flutter lately. So I wonder about the options to make use of the various js libraries in flutter directly. More concrete I am interested in using the openlayers library in flutter to create a versatile map view with various functions for drawing and editing. So I wonder what options are there to include it.
So far I see two major ways:
Using a webview:
Even though there is no native webview widget yet in flutter there is a plugin for this (https://github.com/dart-flitter/flutter_webview_plugin). The main advantage I see here is to use the openlayers library "as it is", however the plugin is in kinda early state and I could not see a way to establish communication between flutter and js functions in the webview yet. Futhermore (this is just my assumption) using the webview is probably slower than creating a proper widget with dart code.
Creating a custom widget:
I have seen there are ways to convert js code direcly to dart, using package js (https://pub.dartlang.org/packages/js) and for typings js_facade_gen (https://github.com/dart-lang/js_facade_gen) like it is done with the chartjs library (https://github.com/google/chartjs.dart/). So similar to this it should be possible to automatically convert the openlayers lib to dart. The main issue however is to integrate this into flutter, since openlayers is using a html5 canvas if I'm correct. Also the chartjs.dart package does not giva any hints how to include it in a flutter app. I've also seen there is a leaflet plugin (https://github.com/apptreesoftware/flutter_map) which is creating their own widget, however they seem to rewrite the code by hand (?), which is for openlyers with 20.000 lines of code not really an option atm.
I'm aware that this is not the best question format for this site, nonetheless I hope someone has some advice or hints on where to start or how to implement this, especially for the 2nd option - the first one is more straight forward. Or if you can think of a third option, go ahead please, I'm grateful for any clues.
The only way to make use of JS in Flutter is using WebView.
Dart compiles to JS only for browser applications, for Flutter it compiles to native machine code.
convert js code direcly to dart, using package js
package JS doesn't convert JS, it just creates proxies for JS functions to be able to call them from Dart, but that is also only supported in Dart web applications.

Which powerfull tools are used to create website and could GWT and GXT work ?

So I started working this year after finished studying last year. I have been exposed to so many things in the working environment. Suck as Maven, GWT and Hibernate.
Now I got this side project in which I just need to create a simple website which would bassically just display some information and contacting details.
So I was wondering if HTML5 CSS and JavaScript is still the way to go and if there are not powerfull frameworks in which could you help me do animations and graphics much easier.
Also if you know GWT and GXT would it be a bad idea to create a visually apealing website using these frameworks.
Thank you so much for reading
Have a nice day
Objective: Create a simple website which would basically just display some information and contacting details.
GXT:
GXT is built on GWT.
Go for GXT when you are in need of rich set of widgets (it is a very large set of collection) out of the box. Have a look on the following link where GXT has showcased the different widgets
http://examples.sencha.com/gxt/4.0.0/
GWT:
GWT will be having minimal set of widgets when compared to GXT. Have a look on the different widgets which are provided out of the box. http://samples.gwtproject.org/samples/Showcase/Showcase.html
Javascript Animation framework:
There are bunch of javascript libraries/frameworks for animation, choose one which is most appropriate to your work. Have a look on the following link.
https://www.javascripting.com/animation/
Conclusion:
Consider the following before finalizing on a framework
Framework which is having more out of the box components which matches the requirement.
Framework which is more stable
Framework which is having more support on the internet, such as forums, blogs.
Happy Coding!!

Best API/code library to build a timeline/chart

I'm reaching out for some advice on the best API/code library to use to build an interactive timeline/chart. I have included an example image below. The idea would be that you have a key, and clickable elements along a path/line that pop up/out when interacted with.
I have a lot of experience with Google Maps API, but this is quite clearly something a little different. Would you suggest ChartJS? Or something else? Just trying to get some background/research.
Do let me know if posting this on SO was the wrong thing to do.
Take a look at D3J or Dojo. They are both JavaScript libraries for data-driven and data-centric front-end applications.

JS Plugin Load Issue

What combination of libraries/frameworks would perform best for an HTML5/CSS3/JS app with moving elements? I have definitely done my homework, but I am diving into a world I don't know very well... as far as performance goes at least. Are there principles I should understand before I manipulate, perform logic on and animate DOM elements?
I am going to use AngularJS if I can and should (i'm fairly familiar with the basics now), and my best research has pointed me towards Steroids.js. There are just so many libraries and PhoneGap-like frameworks! Here's what I have found...
This post helped me, but just to get started
Require.js
BindOnce
Titanium
Sencha
Construct 2
WebGL/three.js
FireBase
AngularFire
In short, is there any sort of resource/documentation/reference or testing method of JavaScript load? Or is there any kind of simple answer to this (outside of giving up and learning Objective C, I would really like to be able to use the languages I already know. Thanks for the read :)
In the end, if you want more native functionality to be part of your app, you will have to learn at least two other languages outside of JS: ObjC and Android-flavored Java.
My experience with Cordova was enough to convince me that aiming for a perfectly native-feeling app with Cordova requires you to essentially rebuild a large amount of native functionality in JS, which places you firmly at the mercy of the web core that each OS uses and their limitations. Eventually, you will find yourself using so many libraries to emulate what you can do with the native languages, that the sheer weight of dependencies and their management can very quickly leave you trying to debug shadows.
Even then, there will be things that you have to find hacks for to get near-native functionality for, and performance will hardly ever be as good as a native-language app, especially if you have to load data or resources from outside your application.
My suggestion is that if you must use something like Cordova, give up on the idea that you're going to be creating a 100% native feeling app. If a UI element doesn't work like its native equivalent, don't spend a lot of time trying to force it to work counter to its web roots. Style it appropriately so that users aren't confused by it breaking native conventions, and move on. If you try to fix everything that looks like but acts not /quite/ right, you're going to find yourself in dependency hell and /still/ having to touch native (Java or ObjC) code to get the plugins to work right.

Categories

Resources