I am at the beginning of creating my own personal React Web App, and I would like to first start by creating a custom trapezoidal (Nothing too complex) shape to use all over the front page.
I researched many methods and libraries that could help (Konva, draw-shape-reactjs, etc.); however, I would like to ask for other opinions about what to use. I did see somewhere that React does not work well with HTML Canvas. So I'll avoid that, unless told otherwise.
If I should consider a simpler way to create such shapes with CSS on a React Framework, please let me know.
Related
I have a frontend developed using Next.js in which I consumed Storyblok API to get dynamic content.
I want to use it as a Block in Theme App Extension instead of refactoring the code into liquid
Is that possible?
I really appreciate any help you can provide
Ps:
If there is a better way to do that let me know
I tried adding it as IFrame but it is not recommended for SEO and performance
Go for it. You can do whatever you want in a block. You control the HTML(Liquid), JS, and CSS.
Note that you are probably killing a fly with a sledgehammer but that is your burden to bear. If your block is somehow slow or in-efficient, it'll show, but maybe it'll be zippy and great. Just throw down the code and see what happens. Should not take you more than a few minutes to establish whether you like it or not.
This is more of question of if it makes sense to use Reactjs in my instance. I have an application that generates html serverside. I can not use any js based templating solutions serverside, it is a java/jsp solution blackbox.
Since the markup is already defined I am weary of using JSX to duplicate all the template logic currently only on the serverside. What is typically the best approach to integrating reactjs in to an application like this.
What will be the real advantage to using reactjs for me in this situation. Most of may app will continue to be rendered serverside go forward.
Obviously React is not designed to be used like this; but you could still do it.
Long story short: If you want to build something more complex in front-end you should do it; if you only want to get advantage of JSX templating instead of jsp, it's just a big overhead.
Advantages:
You will be able to step away from standard jQuery approach of handling javascript in .jsp.
You will get all the benefit of a client-side framework, so you are able to handle more complex scenarios in front-end as you would do with standard javascript.
You could hide some business logic in the java side (servlets) and making it available to React world.
Disadvantages:
Probably it's a pain to prepare the development environment mode (webpack, hot-reload, etc.); e.g. you'll need to recompile the jsp on the fly on every js change.
You can't use client-side routing (so you'll have like one SPA per page).
Probably it's really hard to make server side rendering work (for the React part)
The actual loading time of a web page and the user impression of that loading time can be quite different. For example, here are three different experiences a user can have while a page loads:
Waiting for a blank page to completely render at once
Parts of the page immediately render (e.g. top navigation) but components load
individually
The entire page is made of components that load individually
These different UI experiences become more common as JavaScript frameworks become more common, such as React or Angular.
The user's UI experience can also change if individual components use loading markers to indicate something is happening, such as Loading... or a spinning wheel.
What are some guidelines for improving the user impression of a fast loading page? If there are not any, how do you approach this problem?
There is always going to be an initial hit whilst the javascript gets parsed and executed. However, if you are after very fast initial loads you could try a few techniques such as:
Delivering a "critical" payload first which will quickly load the "essentials" of your webpage to make it feel much more responsive. Webpack has a code splitting feature that you could use for this effect.
Making use of Server Side Rendering (i.e. universal style applications) which will execute the javascript server side and embed the output in the HTML payload. This probably renders the best results for what you are after as you don't getting the "flashing" parts as much you would otherwise. It's a pretty cool technique but is probably presents more technical challenges so you will have to decide on your own tradeoffs.
If you are after an example of SSR you could look at a boilerplate I recently put together for React: https://github.com/ctrlplusb/react-universally
In that boilerplate I actually also make use of Webpack's code splitting feature based on the Routes defined within the application. Checkout webpack's docs on this: https://webpack.github.io/docs/code-splitting.html
If webpack is completely new to you I highly recommend the survive js series: https://survivejs.com/
I know what angular.js is and I even had a question about it #Why use AngularJs in frontend if Laravel is already used as backend?.
but recently I started to read about React.js and from its site (its the V in the MVC) which is exactly what am after "handling the view and nothing else".
for me, I think Angular.js as an MVC framework was made to be used with something that is built with JavaScript from start to end like Node.js
and it seems like an overkill when used with something like Larval, where I simply need something to handle the frontend and nothing else + Angular have 2 main drawbacks
with the latest news about a new version that won't have back compatibility with the current version makes me even feared to start learning it just to find that more or less every project out there is using the old version which mostly is true.
angular renders the whole dom if anything got changed which again is an issue for big projects.
so based on the above, plz note that I want to learn/use JS solely to enhance the user experience not to build another Gmail or Facebook and so my question is,
could React.js be used with Laravel to handle the view and do everything Angular was going to give, or I have to use Angular liked or not?
could React.js be used with Laravel to handle the view and do everything Angular was going to give?
No
React is just for views. React components are stateful components with some really clever rendering stuff happening behind the scenes. To build a fully functional front-end app, you'd need to tie in some other code (or write it yourself).
React works well with Facebook's Flux architecture. I would suggest looking into that to learn how to manage the state of your react components.
What's key to understand here is that Flux and React are not parts of a large front-end framework. React is a library and Flux (as provided by Facebook) only provides a Dispatcher. The rest is up to you to implement. There are some pre-existing implementations you can look at if you need some help to get started.
What I like about flux is that it allows me implement things the way that fits my application best. React takes care of the heavy DOM lifting and is very easy to learn. Compared to Angular, I don't have to learn arbitrary conventions and gigantic APIs of a huge framework.
I am trying to find a solution for an image slider such as Amazing Slider and how to integrate it in my e-commerce web-app which I have developed using Angular JS. I want to have features such as lightbox and a slider with thumbnails underneath, and also video integration. I know its a lot to ask but its a shame that this very strong framework lacks (to my knowledge) a proper image viewer. Has anyone tried this integration before? Are there any other solutions. After doing a google search all I found is bootstrap UI and a gist for lightbox. But these are not anywhere near of what I am asking for. Please advise.
The reason AngularJS does not have such an inbuilt facility is that AngularJS was not meant to address such things. Its an application framework. It is not meant to be a UI framework.
Having said that, I am assuming you have the images you want to render in some sort of collection in AngularJS. So you can just write a very simple directive which will take your collection as a ng-model and render the slider for you. This allows you to reuse this component in multiple places in your app.
If you have only one place in your app that you need the slider, then just a simple ng-repeat will suffice.