Let's say for example I am working on a website which makes use of redux. Then I want to import a different project, e.g. some embedded app, which also uses redux.
So then I have a website written using react & redux, with an embedded app, which also uses react & redux, but neither projects know that the other project uses redux.
Will this be a problem? Will there be any conflicts? And how would the chrome redux plugin work? Would it be able to pick up both redux stores?
Depends on how you plan to embed. It should not be problem.
About Chrome Redux plugin, I'm not sure about this.
you can use IFrame. There should ideally be no problem doing this, till you are on the same domain.
or
If you choose the Web-component way. It will give you shadow dom inside. This can be used to create a widget which then can be used anywhere without conflicting with parent in anyway.
see the
https://auth0.com/blog/web-components-how-to-craft-your-own-custom-components/
hope this helps.
Related
I'm making a notes app and currently I have done my own styling for things such as the FlatList. How can I make the components resemble real iOS components such as the list in the notes app for iPhone?
It is possible by creating a native wrapper for the component. You can try to find maybe somebody who already created it on GitHub or implement it yourself following this guide https://reactnative.dev/docs/0.69/native-components-ios.
If you decide to build it yourself you can use this CLI https://github.com/callstack/react-native-builder-bob which will generate template.
I've been doing a lot of research for an Angular based internal component library we are building and I can't seem to find why a Modal or Dialog component requires the abstraction of a Service to work. I have a working example simply using an approach of an Angular component with some CSS to make it be where it needs to be on the page, using content projection to make the code reusable.
I basically want to understand what hidden funtionality/benefits there are to using a service to call/generate the modal since every Angular based component library I've come across uses this method.
I am involved in a project that several people working on a react native project.
I need to find a way to separate the styling tasks form code, in a way that UI develop can work without the need of code developer (from my point of view, a style is a person who define the structure of UI, place components on screen and also define their color and visual representation).
my questions are:
Is there any tools that the style developer can use to create styles and export suitable files for inclusion to project?
How can I make sure that the two team work without duplicating their work by other team? I came from a WPF and Web development, and in that systems, there is a good separation between the UI and codes. For example, In MVVM, the only agreement that stylist and coder should have is the name of component, and the stylist can make all of the styles and coder can do all of the coding without repeating their work (I know that this is over simplified, but the concept is there and a good team can use it). In a web development, stylist create the HTML and CSS, and the coder use angolarJS or JQuery to control the component and attach to their events.
In our styling team we are using skitch, can this tool generate suitable style code for react native? If yes, what would be the workflow?
Any other suggestion on how best to separate styling from coding in react native.
I don't have the best answer for this question, But I can provide you some feedback & tips from my experience.
For separating UI & Business code like in MVVM, you can separate the classes as
Container class (handles all business logic) and
View class (Only responsible for presentation) with styles defined as a separate class that can make use of some universal theme provider
There can be multiple view classes (iOs, Android , if possible Web) but all them will use the main container class for business logic (REfer 1st link for more details)
Refer:
https://blog.cloudboost.io/react-native-a-deep-dive-part-1-5a982f847d20
https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
For styling you can opt for some Theme Provider classes that will hold universal themes as an object. The coder can use these styles in the components. The main theme will be defined in the root class with the provider. If you are carefully reusing these styles, you only need to update the styles in one place updating all of them. Also there is support for dark & light themes.
Refer:
https://github.com/callstack/react-native-paper
https://github.com/xinthink/react-native-material-kit
https://github.com/xotahal/react-native-material-ui
I am starting a developement of a big project and I need to know if to use ViewEncapsulation None or Emulated.
From some reason the default is Emulated but I noticed that Angualr2 Material uses None.
We need to have reusable widgets within the projects and have different styles and also dynamic themes.
I know it's can be done with Emulated but is seems more difficult to manage and not as simple as using CSS rules or override.
What should be the recommended mode for such a project?
The benefits of using 'Emulated' option is, that You will be able to create encapsulated components(styles, template, etc.). Also it will help You to not only create component once(dropdown, table, popup) and reuse it within your current project, but also it can be used in different projects later or being open-sourced, if You will.
The recommended way is using the Emulated option.
It will give you the ability to encapsulate your component, not only the HTML template, but also the styles.
This is the future. It is called web components and I strongly advise you to read about it. For more details, see:
Modular future web components
Shadow DOM strategies in Angular 2
I am working on a Facebook iFrame application, and have a question about styling.
I want the application content to look like the rest of facebook. So the most obvious approach I could think of was to use a stylesheet provided by Facebook for application development that includes such styles. However I cannot seem to find anything about this on developers.facebook.com or any other site for that matter.
I have created some FBML application earlier, and these was able to use Facebook styles directly since the application content was rendrered within the facebook pages. But iframes does not inherit the stylesheet from the parent content (nor should they), so I was wondering how (or possibly if) this can be done.
I have found some posts/blogs that simply tells you to create an application stylesheet that mimics the Facebook look. But I don't think this is a very good idea, as this CSS must be updated every time anything changes on Facebook. It also seems that all facebook wiki pages regarding CSS (which I have used before) has been removed.
The reason I do not want to use FBML Canvas is that Facebook is in the process of deprecating this approach. They recommend new applications to be created using iframes.
http://developers.facebook.com/docs/reference/fbml/
I really hope anyone has any good ideas on this.
There is no official way. For some reason, FB shards their styles to a ridiculous degree. They also change the filename rather than appending a version parameter every time they make a change to prevent downstream caching. Here's an example of todays stylesheets:
http://static.ak.fbcdn.net/rsrc.php/y-/r/40PDtAkbl8D.css
http://b.static.ak.fbcdn.net/rsrc.php/yE/r/u7RMVVYiOcY.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/P-HsvhlyVjJ.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/CFyyRO05F0N.css
http://static.ak.fbcdn.net/rsrc.php/y0/r/k00rCIzSCMA.css
http://b.static.ak.fbcdn.net/rsrc.php/yv/r/BJI6bizfXHL.css
http://b.static.ak.fbcdn.net/rsrc.php/yD/r/rmbhh_xQwEk.css
http://b.static.ak.fbcdn.net/rsrc.php/yn/r/xlsrXFt9-vD.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/Uuokrl6Xv3c.css
http://b.static.ak.fbcdn.net/rsrc.php/y0/r/klTGALEjWM8.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/mlYhlJwnCdr.css
http://b.static.ak.fbcdn.net/rsrc.php/yT/r/uFI2FW2LitH.css
http://b.static.ak.fbcdn.net/rsrc.php/yh/r/5Bzj1255G1S.css
http://b.static.ak.fbcdn.net/rsrc.php/yp/r/5UteuBI1b8_.css
You can automate this process fairly easily using either PHP or .NET using existing solutions Minify and Combiner respectively.
A simpler method would be to use the Web Developer toolbar for Firefox, go to Facebook and choose the Web Developer toolbar option to "view CSS" which will bunch all the CSS up for you. Copy and paste it into your own local stylesheet and you only have to update when Facebook makes a major change.
So while there is no simple way (that I am aware of), there are methods for you take care of it in a fairly speedy manner.