Integrating React Build file inside Django project - reactjs

I have been building web apps using NextJS and Django for some time. But recently, my boss gave me the requirements for using ReactJS and using the build files inside Django as templates. Now, I have never tried it before, but according to this Tutorial, it is possible.
But my question is, should I do it? Would I face any performance issues in the future if I do this? Or will there be any bugs or issues related to routing?
I know I can try it myself, but I am looking for some expert advice from senior developers.

Related

Where can i find react js with php mysql source code samples

I am a PHP developer wanting to learn react js. However, I tried googling for samples codes that i can pick up but found none. All my database are in mysql. Seeking any advise on this?
Terry
This tool will create a standard React project seed, you can look at the code it generates for a start.
Otherwise, the React tutorials on their official website is full of code examples.
This site helped me when I learnt PHP, mySQL and implementing a react frontend, along with CRUD functionality, and seeing how the frontend adapts. I know you've asked this question a long time ago, so I hope you've come right, but here's my input for a coverage on
ReactJs introduction
React CRUD operations using PHP API and MySQL
Credits to : Durgesh Sahani
DEVTO

Next step after Ionic, NativeScript or ReactNative?

I created many Ionic apps, using all it's versions, from 1.x to the latest 3.x
All along with cordova, and AngularJS, it's a great framework, with big community, it's getting better and better over time.
But it's still an hybrid working over a WebView ..
With my knowledge to AngularJS, should i move easily to NativeScript, or start over with ReactNative ? from what i've seen ReactNative has better community, and many big apps are in it's showcase.
So, for cross-platform apps, should i keep working on Ionic, go with NativeScript, or move to ReactNative ?
Its good to know you are interesting in joining to the cause of creating native apps using JavaScript. You are in the right direction, both Nativescript and React Native will guide you to your goal: Build professional applications for iOS/Android using Javascript, however there are some differences you should know at the time you decide which framework to use.
React Native:
Its a framework developed by Facebook, using React it renders true native views. It uses Flexbox to decorate the apps so if you never used it that will be a new challenge for you, it is not hard to learn. My problem with this is that there is no direct support from the developer team, and only the community is from where you get the help, and sometimes it is not quite accurate. To create iOS apps you need a Mac computer, otherwise you can only create apps for Android. As far as I know, some basic information you might need in your app, such like platform, OS version, portrait/landscape it is developed by plugins from the community, and this information is not coming from the framework itself.
NativeScript:
Its created by Telerik, a very strong programming company who has high quality developers and strong support for its products. It uses Angular as a option to create your apps and its very well documented. If you are a good CSS developer you will be fine because they uses CSS to decorate your app. Nativescript community has developed tons of plugins. Nativescript core team is creating a lots of tools to help you through the process. Recently they launched a tool called Sidekick, which allows you to build/livesync your app from the cloud, which means you do not need a Mac computer for create iOS apps (isn't that cool?). With Nativescript you can choose Javascript, Typescript or Angular+Typescript, all of them will end up creating native apps. For support, you can contact the core team directly, and they will give you the best answer you can have, this is one of their goals.
I hope I have answered your question.
Thanks!
I don't know about React Native, but we have a great community with NativeScript. Hop on our Slack channel and meet the fam!

AngularJS 2.1.0 official scaffold & style?

Google knows best… but they're inconsistent!
The official ng CLI generates a scaffold one way, whereas the official tutorial chooses a different way.
I'm not talking just directory layout, typings.json vs types in package.json choices are also particularly worrisome.
What style am I meant to work with?
Angular 2's tutorial basically just shows the quickest and easiest way to get up and running with the framework. It omits mentioning things that could scare away a potential newcomer to the ecosystem, it is meant to be simple.
angular-cli on the other hand actively incorporates best practices, latest technologies like Webpack 2 Beta and tries to give developers a piece of software to quickly scaffold and develop scalable production apps without worrying about build-tools and configuration.
QuickStart
This is not the perfect arrangement for your application. It is not designed for production. It exists primarily to get you started quickly with learning and prototyping in Angular
angular/quickstart/README.md
angular-cli
The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
https://cli.angular.io
See also: https://angular.io/styleguide

Front end material design stack with angular.js

I am trying to get better at coding and am trying to figure out exactly what front end stack I need. I have red a lot and about a lot of tools but it is too much and I don't know which ones work good together or not.
Currently my idea is to do a web app with the design principles of Material Design from google and use angular for the logic of the front end.
I have red about and used these tools: Angular.js, Material Design Lite, Angular-material, polymer, ionic, bootstrap, Materialize and other various material design frameworks.
I am playing with this demo that I wanted to try out Material Design Lite but went too further and ended up needing Polymer for some input drop-down components. Playing further more with MDL I found out that it is not sufficient as bootstrap as I am used to work and would like to have this in it, but don't get me wrong I like MDL.
ionic has some good features for the local server and easy set up of template app as well other nice things like export to ios,android app, push notifications, but I ended up deleting ionic.css cause it was interfering with MDL and Polymer
I am asking some more experienced web app developers to help me out with this stack dilemma. I would like to get this out of my mind so I can be free and develop more.
Also tools like GRUNT, BOWER and so on? which one is the best in my case?
note: if u got interested the back end would be cakePhP and Mysql and the data type is going to be JSON (angular will send json to php into DB).
It can be overwhelming trying to learn all the tools and using them at the same time. My advice is to just use the tools when you need to.
If your web app is simple you may not even need a framework like angular. If you want to play with material design, you can do that with the css classes that MD lite offers no matter if you use angular / polymer / or plain javascript. ( If you want to use Polymer you already have some material design styles included. )
Some people prefer starting with the most simple solution and keep adding more sophisticated tools gradually. Others prefer starting with a more complex solution that has integrated the best practices, and in that case using a "Starter kit" may be useful.
Regarding Grunt/gulp... etc. You could worry about that later when you need to have a "build system" to do tasks like compressing files, optimising images and other things that are important for publishing.
After years doing frontend development i realised that is not possible to master all the tools available ( and having a life outside code ). You eventually settle for some tools (everybody have different preferences) and the important experience comes with solving real problems.
i would recommend you to use angular-material for your project if :
you have good knowledge of angularjs or if you find it interesting to learn
you have gone through google design and you want to implement it in angularjs way
try implementing missing features or take online help
Angular-material team is working on adding more and more features as already build in directives and services. Check releases on github page & demo guide
( Drop downs are already there in latest version as menu)
Few points
Google has an awesome open source guide for design.
Angular-material is a framework that helps you implement and follow that design language and principles using angularjs.
Bootstrap is just a framework which gives implementation of css, js related to front end work. Look and feel will be entirely different from google design.
Ionic is again a completely different framework which provides implementation and guide for mobile app development.
You can read about diff in angular-material/bootstrap/ionic in my post here
Bower/Grunt
bower ( package manager) and grunt ( task runner) are tools which work in node environment.
if your development environment is nodejs you should use them to get work done quickly and efficiently.
Check there sites for more information.
cakePhp/mySql
If your backend runs on these and you have angularjs in frontend.
Angularjs can make restfull calls in JSON to your api and it would all work good.

Gulp unbuild from salesforce org

I am actually developping an application in a salesforce environment using MavensMate and Sublime Text 3, built with Gulp, in AngularJS from Yeoman.
I managed to connect my built application to salesforce thanks to CodeScience gulp angular tutorial on youtube, and can now develop my application locally, test it, build it, and finally send it to our org.
Right now i'm asking myself a question:
How can another person unbuild the metadata and static resources that I have built with Gulp after retrieving them using MavensMate ?
Isn't there any way to do it just so that we can work on different stuff on the project at the same time ?
That would be truely awesome, I haven't found a way to do it yet but will keep this post updated if I do.
Thanks for any help you might be able to provide.
I am the Director of Engineering at CodeScience. I'm glad you've had success with the Yeoman generator for our local SFDC UI stack. We use it a great deal internally to rapidly build SPAs in Salesforce. If I understand your question correctly, you are asking how to share code from a single or multiple SPAs (single page apps) with another developer. A better solution than sharing code through the static resource would be to use a version control solution like Git and a repository host like GitHub. We all work of our own branches (managed by push/pull requests) and branching in general works very well with our local build stack for rapid prototyping. Let me know if I, our or team can help you any further.
the answer is not to unbuild the static resource, but to distribute the source code to the other developers so they can build a new minified resource.

Resources