I am writing a fairly complex Openlayers map application. I am considering implementing React with the application but I am wondering what added benefit it would bring, especially since openlayers has so many built in objects, methods, “stores” etc. Writing React code to access and control those objects etc would be a lot more code. Is it worth it in terms of performance or granularity? (Openlayers is already pretty granular).
OpenLayers handles map view as #estacks said , that is true. There is no reason to use react to handle map view.
But it may not be just map things on your page.
For example; I am working on a map page, it has:
three different data filter modal
one feture detail modal
one modal for property editing
one collapseble div to show data
I use jQuery and bootstrap to handle this features. I am struggling to do that, it is very hard for me.
React or another javascript library for building interfaces helps to achieve this complexity.
Related
I am looking for some recommendations on what libraries, components, approaches to use when building a fully RESPONSIVE React app today?
Should I base on hooks or old school media queries?
Maybe some better solution somewhere out there ?
I suggest using a component library, for the latest components, a responsive component library such as rsuitejs or material design components should do just fine.
Links:
https://rsuitejs.com/en/
https://material-ui.com/
Have a look at Antd or material-ui
or you can use regular CSS & style your components (my favourite way)
Like others mentioned, there are quite a few packages out there for responsive design- CSS frameworks, React component libraries, etc. It is also not hard to roll your own using flexbox and/or grid.
As far as React-centric approaches go, here is one that is pretty efficient. It assumes you are utilizing SSR.
Use Context API to create a Breakpoint Provider component. Its job is to keep track of the current breakpoint, and listen to the resize event to change state as needed. In the constructor, accept the default viewport size. This can be populated server-side by utilizing user-agent sniffing.
Use the Consumer from your Breakpoint Context to expose the current viewport size. This can be used to conditionally load components based on viewport, instead of rendering them and then hiding them with CSS with media queries. You are sending less CSS/HTML down the wire this way, spending less time processing JS and CSS, and for larger sites it can put a substantial dent in loading time. :)
I just found out a small npm package that implements a Provider and a Consumer for breakpoints. Basically the idea exposed by adamz4008:
react-socks
I tried it and it's pretty straightforward. Plus it seems the lightest weigthed option vs using something bigger as material-ui or antd (which are great but would be an overkill if you won't use their components or if you're are already using some component library with no breakpoints).
There's also a very simple tutorial on how to use it here
As a super quick "meta-example", you use its BreakpointProvider to wrap your React application component (top-most) and then inside any child component of the wrapped component, you can use the Breakpoint component to do things like:
<>
<Breakpoint small down>
<MySmallComponent />
</Breakpoint>
<Breakpoint medium up>
<MyBigComponent />
</Breakpoint>
</>
"small" is one of five custom breakpoints provided. "down" means, this, or smaller. Similar logic goes for "medium" and "up", meaning "medium sized or larger screens".
If you want to implement this yourself, you should do a provider component with a listener on the resize event. You can find plenty of examples of how to do that when you search for "responsiveness + react" on google, but here is one from this community :) (check the answer from speckledcarp)
Or is bad idea? I read something about jQuery and react don't work together is it true?
You can do, in theory. In your React render you can use normal HTML tags (ish.. JSX style) and specify bootstrap4 classes on them via className attribute instead of class. If you're just using the grid and the css helpers for position, text-align, typography then you won't come up against any big issues except more scaffolding work. But if you're using the components then you're at a big disadvantage as you'll have to manage state yourself and thus repeating work, as a trivial example the pagination control you'll have write the conditional expressions to append 'active' on className yourself, rather than just using PaginationItem and letting the component manage the active boolean, but things get much more complicated with other components. In addition you'll lose a lot of development assistance that propType validation provides.
I'd suggest you pull back and work through the https://reactjs.org/docs/hello-world.html documentation first before thinking about bootstrap, jQuery etc.. and you'll be a much better position to make a call on this. If you hit react copying and pasting and not knowing the basics you won't get far and you'll end up with a holy mess even if you do get it working. You generally don't need jQuery with react, the only time we see it is when you are using a jQuery component and then wire up/down event handlers to component state by the React lifecycle methods (where an open source react component hasn't already done so).
tl;dr - make sure you understand how react works (probably most importantly state) and the question will answer itself.
I am taking up a task to re-write the following flash app in HTML5:
http://www.docircuits.com/circuit-editor
Given the complexity of the app and my R&D so far, I have identified AngularJS as the preferred MVC framework for the implementation. The app has various parts such as panels, menus, properties, charts, etc., all of which I believe can be easily implemented in AngularJS.
The key problem, however, is that the component design and interaction (things like, drag/drop, move, wire handling, etc.) need to be Canvas-based, as I have been able to export all the vector graphics from Flash using the CreateJS toolkit (http://www.adobe.com/in/products/flash/flash-to-html5.html) into a Canvas library and not to an SVG.
The problem is that there is no clear way to communicate between the "individual objects inside a canvas" and AngularJS. I have looked at the following examples, but almost all of them work on the canvas object, and not about handling individual components inside Canvas:
AngularJS Binding to WebGL / Canvas
Is there already a canvas drawing directive for AngularJS out there?
I am kind of stuck here, and not sure what to do. Would really appreciate a some comments on:
Whether AngularJS is the right choice?
Should I try implementing the Canvas part in another library (such as Fabric.js, kinect.js, Easel.js) and integrate it with Angular (which again seems too big a task for now)?
If none of the above, what other framework should I switch to that can easily handle canvas as well as other functionality like panels, menus, charts etc. with ease?
We finally managed to work with AngularJS and HTML5 Canvas together. Here below, I will share, briefly, our requirements and the approach we followed to achieve it.
The requirement was a bit tricky as we wanted to:
Handle event handles on individual elements inside the canvas, and be able to add these elements dynamically based on the data in AngularJS
Keep data for each individual element in AngularJS while using Canvas for only display of the data.
Use controller inheritance for special handling of data in certain cases (for e.g. all the instances should be movable and draggable, but some instance may need to blink or show some color bands etc.)
To handle the operations on Canvas, we divided it into two parts:
Canvas service
It does the job of
initializing the canvas
adding or removing any element from the canvas
refreshing the canvas
Instance directive and controller
the angular controller keeps the handle for the corresponding "canvas element", and also all the data that is associated with it.
the event listeners on each element trigger specific functions in the angular controller which manipulate the instance data
the directive watches the instance data in controller, and correspondingly updates the canvas with the help of the canvas service
For controller inheritance, we found the following approach quite useful:
https://github.com/exratione/angularjs-controller-inheritance
This helped us create controllers dynamically, and with the help of instance directive, we could also handle individual updates on the canvas along with the generic event handling.
I understand that this approach may not be completely AngularJS-oriented, but it worked well for us, and we were able to handle a reasonable amount of interaction between AngularJS and HTML5 Canvas.
Sure you could do that with Angular just fine. However, depending on the complexity of your app and the type of data synchronization you need I would recommend using JS prototypes to handle that. The "angular way" would be to use directives instead.
Create a global drawing context and then split up the various components into JS objects. Handle the setup, logic, update, etc within each object (sort of like a class) and then draw to the global context. You should have a main draw loop which is essentially a setTimeOut function that updates the game object states and redraws everything.
An alternative approach is to combine Angular and JS prototypes. This is a great example: https://github.com/IgorMinar/Memory-Game
EDIT: another example of building games with angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html
My requirement is a build a web form designer in a browser - just like how Zoho Creator (or something similar to other browser based designer tools like proto.io, protoshare, gomockingbird, lucidcharts etc).
Have a tool box/palate on one side, a canvas and a properties box that always shows the properties of the selected control.
I definitely don't think that using JQuery and working with DOM elements will give a scalable solution like these (proto.io, lucidchart etc.). After numerous trials, I feel that AngularJS is the way to go, but it does not have native support for drag-drop and hence I want inputs from community members like you may have more experience with AngularJS on whether what I am setting out to do, is Angularjs the right framework to use for this kind of a solution?
See screens shots of tools like Proto.io - something very similar to what I am setting out to build. Just that my palate will contain form controls like textbox, label etc which I will drag and drop on the canvas instead of the shapes that proto.io has.
Angular is fine. But the main idea of these kind of frameworks like Angular, Dojo, backbone is to structure your application with a specific designed pattern.Hence getting benefit from that pattern. And Angular will help you construct your app into MV* pattern. i may think what you need now is a graph library that support things with canvas , drag-drop , palettes, templates, overview, etc. Some may be useful are JointJS, MxGraph,Draw2D, Data-driven Documents, gojs, mindfusion.
Draw2D supports Angular as well. The lib has a boilerplate app whichs shows
how to use the draw2d stuff in combination with angluar.
The examples shows how to structure your app with Controller, Factories and two way
data binding.
I think you can use the draw2d boilderplate with any other DragDrop lib. It's just
a pattern how to integrate a third party lib into angular.
Angular has many hooks and pattern which supports any kind of lib
Greetings
Andreas
I want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.
Take this example window:
Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?
What types of objects would you use? Does it make sense to use HTML div objects + CSS?
Also, does it make sense to use Sencha in this case?
Here is how you would achieve that layout using Sencha Touch:
Unfortunately it is pretty hard to explain, but hopefully it makes sense.
I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).
As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.
This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.
Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.
Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - #rdougan's associated demo on github may be more recent).
I did expand on the layout code contributed by #rdougan to add an example of how to implement the Reusable dataviews (gist).
That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.