I have read this article in react native documentation. My question is how can I compile the js bundle differently for android and ios?
For example let's say I want to add a few lines of code for iOS inside a function. According to the mentioned article, I have to either use Platform.OS and check the platform on runtime or use .ios.js and .android.js files and let webpack use the correct static file.
The problem with the first approach is it may make the bundle big (if we have lots of these situations and the codes are big enough) and the problem with the second approach is that if the difference is not much for every change for the common code between the platform I have to change 2 files!
Isn't there any way to have a hybrid approach to consider platform specific code blocks while creating the bundle?
Related
One of the major “selling” points of Kotlin appears to be its ability to compile both to JVM or Android and to JavaScript for the web. To make use of this, it should be possible to have a code base where some files are shared between an Android App and a browser Web App.
However, so far I found little details on how such a thing would be set up, in particularly when working with Android Studio and its underlying Gradle setup, starting from a a run of the Android Studio New Project Wizard. I don't mind if I can only build the Web App on the command line, but I'd like to maintain the Android debugging hookups that Android Studio provides. So far I know very little about Gradle and typical idioms for its use.
I'm sure that I'm not the first person to have this idea, so I'd like to know some best practices on how to set this up. Questions that come to my mind include the following:
Do I mix the kotlin2js and the kotlin-android plugin in a single build file, or do I need to have multiple build files (perhaps I should say “modules” or “projects” except I don't know which)?
If I have multiple build files, should that be two (one Android one Web) or three (one more for shared things)?
If it is two build files, how do I reference the shared sources?
If it is three build files, which plugin(s) do I use for the shared one?
Do I need to split my sources over three different source trees? Are there any conventions how these should be called?
Do I need to split my classes into three groups of packages, or can code for different targets coexist in the same package?
What configuration settings do I need to tweak to make the IDE aware of the layout of my project?
I've read the following relevant documentation, among other:
https://kotlinlang.org/docs/reference/using-gradle.html
https://docs.gradle.org/current/userguide/intro_multi_project_builds.html
https://docs.gradle.org/current/userguide/composite_builds.html
https://kotlinlang.org/docs/tutorials/kotlin-android.html
I would recommend using IDEA wizard to create a simple multiplatfrom project for you (File -> New -> Project -> Kotlin -> Kotlin (Multiplatform - experimental) ). Community edition should suffice.
Answering your questions:
You don't mix plugins. You create a separate module for your common code and use 'kotlin-platform-common' plugin for it.
Three modules, special plugin 'kotlin-platform-common'
Use common sense for source splitting. Put whatever you want/able to reuse in the common code. Put platform-specific code in platform modules.
No package restrictions. You can put everything in the same package if you so desire =)
Pretty sure it should just work. If not, try re-importing.
I have been reading multiple different articles about what Isomorphic application is, why this type of architecture is better and so forth. But I still have a bit of uncertainty as to what is meant by such term.
How would you define what "Isomorphic Application" is, without going too much into details?
They are, more recently, also called universal. I'm not sure about the whole app being called isomorphic/universal, but you can certainly have parts of the code base that is universal.
Isomorphic/universal code is code that runs on both the client (browser) and on the server (NodeJS). Since they are both JavaScript this something that is possible if:
you do not mention window, document or any other browser-only methods
you do not mention server, fs or any or any other node-only methods.
If you do need to do the above within some code that is meant to be universal, you should wrap it in a function that either mocks the required method within the alternate environment or wrap it in conditionals so that the app doesn't crash.
An example is console.log which will work both within NodeJS and any browser, along with most other es6 methods in modern browsers.
I use build tools (like webpack) to then help create / export functions within individual files so that we then have a bundle like client-app.js which is included in the HTML file and is the browser only js. The server then might start using server-app.js which is the server-only bundle. Both bundles can be created using a lot of the same universal source code.
I wanted to test flow in my React Native project. I ran flow and found that it had no effect on Android files. I found the below given code in .flowconfig:
[ignore]
# We fork some components by platform.
.*/*.web.js
.*/*.android.js
Why did the React Native team ignore these files? I was not able find much information about the same else where. I know that I can make edits and flow would start considering android files as well, but I am not sure if it'd be right. For example, this is what fabergua has commented on a issue Flow doesn't recognize platform-specific react-native files related to it:
#mhollweck : React Native's default .flowconfig is set up to ignore
all .android.js files. You can work around this by changing
-./[.]android.js to ./node_modules/./*[.]android.js in the .flowconfig of your project.
But, should we go ahead with such workaround? Wouldn't it mess with the project when we upgrade it via react-native-git-upgrade?
I've always thought that they ignore Android by default because oftentimes you would prefer Flow to consistently operate on a particular platform's modules, and iOS was the original platform for React Native. Say you try to "jump to definition" for a particular function defined in both myFunction.ios.js and myFunction.android.js. With *.android.js ignored, Flow will consistently jump you to the *.ios.js files. So if your app is primarily focused on Android, I'd switch that ignore to *.ios.js.
*.android.js files are ignored by default to choose a platform arbitrarily, but there is also need to run flow in the following way:
[ignore]
; We fork some components by platform
.*/*[.]ios.js
...
[options]
module.file_ext=.native.js
module.file_ext=.android.js
module.file_ext=.js
AFAIK, in Meteor, when compiling app, all javascript files and all css files will be merged to one file. I think this behavior will slow down app (because user must download all css and javascript that unnecessary for that page). Moreover, this behavior makes our app not dynamic, because maybe some page, we need different css or javascript files.
So my question is: How can we choose custom javascript and custom css for a template ? Does Meteor support this ?
Thanks :)
AFAIK Meteor is not supporting this exactly in that way. So you are left with two workarounds. One would be writing a own extension which helps you in that regard or finding one which already exists. And the other would be putting your special resources somewhere in the /yourMeteorApp/public folder which is excluded from the merge process (see http://docs.meteor.com/#/full/structuringyourapp). And now you could write some template specific logic to load and evaluate JS and CSS resources from there when your template is accessed. Resources in public are available directly on root level - so public/js/my.js would be available under www.example.com/js/my.js.
UPDATE:
This answer is quite old and in modern Meteor apps you should make use of the import logic (and the imports folder) which didn't exist in that way when I originally answered this: https://guide.meteor.com/structure.html#intro-to-import-export
This should be the best way to handle any dynamic JS requirements and strucutre an app by far nowadays.
In practice this has yet to be a problem for me. The combined javascript files are minified and obfuscated. The fact that any "page load" within the UI is done without a server GET makes the UI quite snappy. I have over 20 packages which add up to 2.1MB of js loading when the app cold-starts. Even on iOS it feels fast.
I understand that in Firefox OS every app is a web app, but I'd like to create a "native" look & feel in my own application, meaning that I want it to "fit in" with the built-in application styles.
Mozilla even has a style guide for this:
http://www.mozilla.org/en-US/styleguide/products/firefox-os/
Is there a stylesheet and/or a JavaScript which I can include in my app in order to create controls and UI elements that look like the ones in the style guide?
(The only download I could find on that site was a PSD containing all the designs, but I'm looking for something ready-to-use.)
You have the good link for some UI guidelines, but you can check what we call the Building Blocks or even get those on GitHub. Another way is to see what we did in GAIA, but in any situations, it's not just about importing a CSS file.
Apart from Building Blocks, there is also Mozilla Brick based on X-Tags, included in Mozilla Appmaker.
clone the BuildingBlocks from https://github.com/buildingfirefoxos/Building-Blocks.git
Or do bower install building-blocks if you prefer manager libraries by bower.
Include cross_browser.css if you want your webapp can run on other browsers.
Make sure to check the index.html for example. The Building Block components are writen by CSS only and located in style and style_unstable folders.
If you want more code examples, install UI Demos with Firefox Browser https://marketplace.firefox.com/app/ui-demos which comes with sample and source code.
The usage is updated in my blog post
http://blog.gasolin.idv.tw/2013/09/reuse-gaia-ui-elements-with-building.html