I haven't touched React in over 2 years, and a bit confused looking back at my old code. For example, if I were to build an instagram clone, would I utilize html templates and inject javascript as such as
<div id="reactEntry">
Loading ...
</div>
for the login page, profile page, etc.
and use react components for main logic? for example, dynamically rendering posts and comments?
Or would it be smarter to make everything a react component-- login page, profile page, etc.
would it be smarter to make everything a react component-- login page, profile page, etc. - yes. As you don't need to rely much on other libraries and can use routing between pages. Also, there is performance benefit for a fully react app.
Having other components along with react component would not cause any harm as long as you don't dom manipulate the react component.
Or would it be smarter to make everything a react component-- login
page, profile page, etc.
There are benefits of using react components over the traditional multi-page web apps.
Since most react apps are Single Page Applications(SPA), hence they are fetched once, and then virtual dom handles the rendering of various components. This is faster than the tree-based document rendering.
Components are re-usable. Say you need a Document upload form - consisting of a drag and drop file field and an upload button. You could simply create a component, and keep using it at multiple places. All components have their internal logic, which makes it easier to manipulate and define them. Such an approach ensures a consistent app look and facilitates codebase maintenance and growth.
Plugins like react-router can handle page transitions, by using its navigational components. You could do partial renders too, giving you a faster UI/UX experience than rendering the entire pages.
Related
I have to make a website with different Java-Tasks and informations. The user can join the homepage and can click to different pages. On the Java page he can do some tasks. The website is completely done with HTML. Now i need GWT for the tasks.(multiple choice etc.) This page is easy to make, when i only have this page. But how can i put all these things together. I mean: a homepage and different pages with only html and links and a page which is also linked to all other pages for navigation and is done with gwt for the different tasks. Do i need GWT for all the other pages or only for the task-page? On the other pages there is only text.
You don't need GWT for all the pages, but you can use it.
You can create a GWT project with a Module for the GWT page you want and a static HTML for each one of the HTML pages.
Alternatively, you can build a web application that loads the content of each page dynamically in the same element (e.g. in <div id="content"></div>), based a URL token (e.g. < url >#somepage) triggered by your menu items. You can get the token value in GWT with com.google.gwt.user.client.History.getToken().
Web applications such as Gmail work like that. For your use case, with many static pages (pure HTML), it might seem to be an overkill. But if you are using GWT anyway, I would do it like that. In the long term you don't have to update the menu in each HTML page, as you have a single widget for that. You get scalability and a better project organization.
I would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
I’m working with Symfony2, and I have a base.html.twig view which includes a navbar and a logo. Also I have other views which extend the base.
When I go from one page that extends the base to another one, the whole page is being rendered in Safari even the navbar and the logo, the same when I reload the page.
Firefox works fine.
So, is there any option in symfony2 to force safari browser to reload just what the code says? (I don’t want to ask the user to install or configure anything in his/her computer).
I think I'm looking for something like that (but for Symfony2): Livereload
There are many ways to make an AJAX requests to load only part of the whole page. You can use pure JavaScript or frameworks like jQuery, Dojo, Backbone.js, Ember.js, AngularJS, Spine.js, KnockoutJS, YUI, Batman.js, Closure, Agility.js, Knockback.js, React.JS. You can use any of them. They all contain AJAX-functionality.
But you need not only JS-framework to work with partial loading. You need also to organise your controllers on the server-side. Your controllers must not extend your base.html.twig but send in response only html-part or JSON-object that represent this html-part.
Been working on building a huge app using angular js. Have seen too many questions on the same topic on how best we can design an app, but still am lil confused.
A basic app usually has a
1) Login page/Index page
2) Home page - with headers and footers. Body being the partial/composite which keeps on changing.
since we don't have handle to load multiple ng-views, which is best way to structure the Home page such a way that we have one single HomePage container with headers and footers and Body is loaded dynamically via $route.
Right now I have designed it using a single LoginContainerPage which loads Login page and home pages via $routers, but since only a single ng-view is allowed i cant use another ng-view within the Home page to laod the body dynamically again. i am not keen to use ng-include as well.
Another way to go is keep LoginPage outside the $route and start routing from HomePage such that the Body is loaded dynamically.
Wanted to check if there are any better ideas around.
Thanks in advance!!
well in the project i'm working on with angularjs i took this approach:
i had a header that was the main navigation system i made a controller for that that handled the navigation system and knew about where i am right now. i had an ngView which loaded my main content based on routes but sometimes i needed different templates to be loaded and compiled base on some event for instance ajax loaded tabs. i implemented these types of things using ngInclude that the main controller on the view had the responsibility to choose the template and include it, i believe there is no need for multiple ngViews you can simply use scopes to implement different things and handle different parts of your app with different controllers and data. i guess the best idea for you is to make your login page separate.
i did this in my project. my login page was the only non-Ajax page that i had.
edit:
for authetication part if you wish to implement the authentication through angular you migh want to check this.
A designer company have made a prototype of a web application using HTML/CSS/JS, with forms, menus, roll-over sub-menus ... Now I have to take this prototype and build GWT views using widgets.
My question is : Do I have to start from scratch and build every view with UIBuinders and integrate the CSS files or there is an easy way to do this ?
Thanks
My suggestion - don't generate HTML. This basically means not using GWT widgets (or only using widgets that provide .wrap(element) method.
I'm taking this approach with my projects and works very well. I put all HTML in one big file and then hide (display: none) all divs. Then I use gwtQuery to identify, copy and show relevant parts. qwtQuery is also used inject behavior (event handlers).