I like Zurb Foundation (SASS and especially Zurb Foundation for Apps) but would like to use it with Facebook ReactJS and Flux
That is removing AngularJS and replacing it with ReactJS / Flux. A great start towards this goal has been made by Kiran Abburi:
https://github.com/akiran/react-foundation-apps
http://webrafter.com/opensource/react-foundation-apps
What do people think about the long-term viability of using Zurb Foundation for Apps with Facebook ReactJS / Flux like this?
From both technical and ecosystem perspective (e.g. updates).
Or alternatively, is a CSS framework like Zurb Foundation (or Twitter Bootstrap) really beneficial at all with ReactJS / Flux.
Thanks,
Ashley.
Well whatever css framework pair up with whatever shouldn't be your long-term viability concern. Front End technologies changes too fast. IE. for the mainstream, couple years ago everything is jquery, than comes backbone, ember, angular, now react.js and than maybe riot.js. When Angular 2 releases stable version, it probably shift it again.
Your questions should be which ever framework help you do YOUR JOB quicker. Different clients might want different things, some clients i dealt with uses Bootstrap, they provide their corporate design patterns and some of their reusable jQuery * bootstrap widgets to implement, some gave me backbone models and ask me to use it in an angular as an angular service. And some asks me to do it in stylus instead of sass.
So pairing up css and js framework isn't any of my concern for long term, the trend changes too quickly. And the good thing about react is that you can bundle all these third party libraries into one single component ( if you really want do do that. Eg; embedded css into complement with react-styles, if some of your component uses jQuery, you can do a script lazy load at componentWillMount life cycle. ), you got the total freedom, if some strange case that you want to uses both foundation popup and bootstrap popup together on the same page, you can write your own react components to wrap one of each, as long as you got the scope well managed.
Which ever css framework you use as long as it saves you time to do things is beneficial, there isn't a best one, my team built our own css and js framework on top of any libraries to tailor it for our job.
Related
i am a new Webdeveloper and im struggeling to find the right tools and frameworks to use for the specific site i am building.
Its a site for managing all kind of information and documents about clients my firm cares for.
It consists of general information (like statistics etc.) that should be served synchronously and a client specific part that should be a SPA (mainly because i want to have a list of all clients on the side, so that the main part of the page updates when you click one).
My problem is , that there is so much information about that kind of stuff (but not specificly a project comparable to mine), so that i can't decide what the best approach would be.
I found those options so far:
Just serve everything with django and update reactive parts of the page with Ajax
building a dedicated Frontend and with Frameworks like Svelte or React and using Django as API.
Using these Frameworks just for the critical components that have to be reactive and serving everything with django
If i understand correctly, the cleanest way would be Nr. 2, but i would lose access to djangos form rendering with crispy_forms (which, for a website consisting mainly of forms, would kinda suck).
The same is kinda true for Option 3 i think, since the critical Elements are mostly forms. And as far is i know you cant render django forms as react components.
I was discouraged from using Option 1, cause it seems to very error-prone to build a SPA without a framework.
I would really appreciate some input from more experienced People like me to help me with the decicion which path to go down.
Greetings!
There are many options, but it all depends on your knowledge and deadline.
Don't try to make everything perfect at once. Make an MVP using the technologies that you are familiar with and show the working version to the management. I'm sure there will be many edits and improvements that they will want to implement.
If you need an advise about stack, then you can look at Django + DRF + Vue.js
We need to create a PWA with angular which will wrap the ember application and communicate through some navigation and events.
PWa will be just as a container which hosts the ember so that the application can be used as native and as webapps through every devices.
We need some approaches to get some solution regarding the above requirement.
Will it be possible for everyone to give some light one that.
Planning to host the application using iframe under PWA and communicate.Not sure whether it will be helpful or not.
It's not the best idea to use Angular to create a PWA for an Ember app, you should be doing this in Ember.
One reason that it might not be the greatest idea is that if you're adding Angular to your setup you are adding a minimum of 130KB of compressed JS before taking into account any features that you might be using. Assuming a baseline Ember app size you're talking about adding a roughly 60% extra JS to achieve something that can also be achieved by Ember.
It sounds like you might be following a tutorial on how to turn an app into a PWA that is based on Angular. If you are you having specific issues that you don't know how to solve with Ember I would recommend joining the Ember Community Discord and asking for some help there and maybe someone will point you in the right direction.
Am I missing something?
But I am really not getting the rationale behind most online blogs and tutorials suggesting to use a base Django template to render a ReactJS bundle (bundled from webpack).
In my mind, the point of using Django Rest Framework in the first place is to completely isolate the frontend from the backend and have something like Nginx serving an html file that would import the ReactJS library (like any other stndard html/js project). The ReactJS layer would then get or manipulate data solely through the DRF REST API.
It is like most developers treat ReactJS as a completely novel beast, when it can be simply treated as standard JS (with added steroids) that runs on the browser.
Can someone therefore explain to me what are the advantages of using the methods depicted by blogs such as Jonathan Cox and Owaislone ?
On one part, you're right. One of React's principles is to make it function like a Mobile app(that consumes REST API) which also compliments React-Native, so there's not much for the programmer to learn and pick up and can quickly develop an app if they are familiar with React. This way, you'd build the back-end to serve both the web app and the native mobile app without much rewriting or customizing.
Usually, people like keeping their code together, front-end and the back-end if they're just developing for the web. It's a common practice. Since Django is widely used and is also an open source framework amongst a lot of web-developers, there's a big community to develop tools or plugins for it. This way, they'd just have one server instance running and configure the backend to serve just the index.html page, and the routing is handled by the browser.
I, on the other hand, prefer the latter part, work on a team with backend engineers and mobile developers. We heavily rely on RESTful calls for our apps. So we keep our code base neat and isolate our backend from our front-end so each of us can work independently.
It's just a matter of preference really, Jonathan Cox and Owaislone both don't preach about the right way to develop React apps, they just demonstrated one of the ways React can be used.
Also, some backends have a lot of security and need to be configured to allow certain headers for making requests. It could make you look at your computer screen for days while you sit there wondering how to work around the problem and you're diving deep into the documentation for web requests. CORS is one of the problems when you isolate your front end and back end code. It's something that can totally be avoided if Django is serving the files.
I'd say you can go ahead and pick one that suits your need, isolate your React code from the backend if you'd want the back end to work on mobile apps too, saves a lot of time.
I have developed a web app using html, css, jquery and django, and has made it compatible for the screen in mobile devices. But now I want to make it a hybrid app for android/ios and users can install it for extra features. Googled and found phonegap to be a perfect solution. On further searching for the tutorial, most of the tutorial are using jquery mobile for the purpose. My question is, do I need to use jquery mobile to develop a phonegap hybrid app?
No, its not needed, jQuery, without mobile version, its perfectly capable of working with Cordova (I have also made several professional projects with it).
The only limitation is with some touch events, like swipe or pinch to zoom, in what you are going to need another library, like hammerjs
I have been studying Ember.js for about a week now and all examples I studied were single page apps. I have been told to work on a project which expands more than 30 pages and I have no idea what the directory structure would be and if Ember is the best tool as I have never seen an application that links to other pages in the project?
Yes, ember is a single page application, since you only go to one page, it loads the app then you don't need to fetch anymore pages from the server the ember app handles everything. For bigger apps like the one you're suggesting, you'd put each object type (models, controllers, routes, templates, views, etc...) into their own directory for organization.
I quite like to use Ember JS for SPA due to it's flexibility but when it comes to browser support, then I've no choice but to go for Knockout JS for implementing a SPA!
They are both great for SPA, Ember has lot more to offer, but for those that must still support IE7 then the best choice would be Knockout JS...
Hope it helps :)