Top 23 JavaScript Mobile Projects
-
Project mention: Any one care to share a list of the best react native libraries or any useful library that we should all know about? | reddit.com/r/reactnative | 2021-08-02
-
SwiperJS
-
-
-
Aurelia 1
The Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia. (by aurelia)
-
You can use eruda to access desktop like developer console from your smartphone. Just go the website you're developing. Then type javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })(); and hit enter. And you'll be able to acces desktop like developer console from you browser.
-
onsenui
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.
-
Countly
Countly helps you get insights from your application. Available self-hosted or on private cloud.
Project mention: Open Source Analytics Stack: Bringing Control, Flexibility, and Data-Privacy to Your Analytics | dev.to | 2021-11-25Countly (website, GitHub) is also an open-source product analytics platform that is designed primarily for marketing organizations. It helps marketers track website information (website transactions, campaigns, and sources that led visitors to the website, etc.). Countly also collects real-time mobile analytics metrics like active users, time spent in-app, customer location, etc., in a unified view on your dashboard.
-
Scout APM
Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
Project mention: Deactivate scrolling of body while lightbox is visible | reddit.com/r/jquery | 2021-04-18
This is actually a tricky problem when you factor in all browsers and mobile devices. This little library should help: https://github.com/willmcpo/body-scroll-lock
-
-
Project mention: I created a draggable carousel with momentum scrolling and mobile support using Vanilla JavaScript | reddit.com/r/javascript | 2021-10-30
I’d just use keen slider https://keen-slider.io
-
Fix the file on the fly with our hook. See https://github.com/apache/cordova-ios/issues/764#issuecomment-669317730 for details on how the file needs to be patched.
-
Project mention: Screenshoteer - Makes web screenshots and mobile emulations from the command line. | dev.to | 2021-02-01
Github: https://github.com/vladocar/screenshoteer
-
Project mention: Detecting user's device type by device capabilities | reddit.com/r/reactjs | 2021-09-02
I use a package called 'react-device-detect' that seems to work pretty well. It also detects smart TVs, tablets, wearables and so on as well as operating systems and manufacturers. It might be worth taking a look at, and you can peek at their code to see how they do their detection. https://github.com/duskload/react-device-detect
-
const { join, relative, resolve, sep, dirname } = require('path'); const fs = require('fs'); const webpack = require('webpack'); const nsWebpack = require('@nativescript/webpack'); const nativescriptTarget = require('@nativescript/webpack/nativescript-target'); const { nsSupportHmrNg } = require('@nativescript/webpack/transformers/ns-support-hmr-ng'); const { nsTransformNativeClassesNg } = require("@nativescript/webpack/transformers/ns-transform-native-classes-ng"); const { parseWorkspaceConfig, hasConfigurations } = require('@nativescript/webpack/helpers/angular-config-parser'); const { getMainModulePath } = require('@nativescript/webpack/utils/ast-utils'); const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin'); const TerserPlugin = require('terser-webpack-plugin'); const { getAngularCompilerPlugin } = require('@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin'); const hashSalt = Date.now().toString(); module.exports = env => { // Add your custom Activities, Services and other Android app components here. const appComponents = [ "@nativescript/core/ui/frame", "@nativescript/core/ui/frame/activity" ]; const platform = env && ((env.android && 'android') || (env.ios && 'ios')); if (!platform) { throw new Error('You need to provide a target platform!'); } const AngularCompilerPlugin = getAngularCompilerPlugin(platform); const projectRoot = __dirname; // Default destination inside platforms//... const dist = resolve( projectRoot, nsWebpack.getAppPath(platform, projectRoot) ); const { // The 'appPath' and 'appResourcesPath' values are fetched from // the nsconfig.json configuration file // when bundling with `tns run android|ios --bundle`. appPath = 'src', appResourcesPath = 'App_Resources', // You can provide the following flags when running 'tns run android|ios' snapshot, // --env.snapshot, production, // --env.production configuration, // --env.configuration (consistent with angular cli usage) projectName, // --env.projectName (drive configuration through angular projects) uglify, // --env.uglify report, // --env.report sourceMap, // --env.sourceMap hiddenSourceMap, // --env.hiddenSourceMap hmr, // --env.hmr, unitTesting, // --env.unitTesting testing, // --env.testing verbose, // --env.verbose ci, // --env.ci snapshotInDocker, // --env.snapshotInDocker skipSnapshotTools, // --env.skipSnapshotTools compileSnapshot // --env.compileSnapshot } = env; const { fileReplacements, copyReplacements } = parseWorkspaceConfig(platform, configuration, projectName); const useLibs = compileSnapshot; const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; const externals = nsWebpack.getConvertedExternals(env.externals); const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); let tsConfigName = 'tsconfig.json'; let tsConfigPath = resolve(projectRoot, tsConfigName); const tsConfigTnsName = 'tsconfig.tns.json'; const tsConfigTnsPath = resolve(projectRoot, tsConfigTnsName); if (fs.existsSync(tsConfigTnsPath)) { // support shared angular app configurations tsConfigName = tsConfigTnsName; tsConfigPath = tsConfigTnsPath; } const tsConfigEnvName = 'tsconfig.env.json'; const tsConfigEnvPath = resolve(projectRoot, tsConfigEnvName); if (hasConfigurations(configuration) && fs.existsSync(tsConfigEnvPath)) { // when configurations are used, switch to environments supported config tsConfigName = tsConfigEnvName; tsConfigPath = tsConfigEnvPath; } const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`; const entryPath = `.${sep}${entryModule}`; const entries = { bundle: entryPath }; const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf('@nativescript') > -1); if (platform === 'ios' && !areCoreModulesExternal && !testing) { entries['tns_modules/@nativescript/core/inspector_modules'] = 'inspector_modules'; } const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath); nsWebpack.processTsPathsForScopedModules({ compilerOptions }); nsWebpack.processTsPathsForScopedAngular({ compilerOptions }); const ngCompilerTransformers = [nsTransformNativeClassesNg]; const additionalLazyModuleResources = []; const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }; const copyTargets = [ { from: { glob: 'assets/**', dot: false } }, { from: { glob: 'fonts/**', dot: false } }, ...copyReplacements, ]; if (!production) { // for development purposes only // for example, include mock json folder // copyTargets.push({ from: 'tools/mockdata', to: 'assets/mockdata' }); if (hmr) { ngCompilerTransformers.push(nsSupportHmrNg); } } // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes // fixes https://github.com/NativeScript/nativescript-cli/issues/4024 if (env.externals && env.externals.indexOf('@angular/core') > -1) { const appModuleRelativePath = getMainModulePath( resolve(appFullPath, entryModule), tsConfigName ); if (appModuleRelativePath) { const appModuleFolderPath = dirname( resolve(appFullPath, appModuleRelativePath) ); // include the new lazy loader path in the allowed ones additionalLazyModuleResources.push(appModuleFolderPath); } } const ngCompilerPlugin = new AngularCompilerPlugin({ hostReplacementPaths: nsWebpack.getResolver([platform, 'tns']), platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot) ), mainPath: join(appFullPath, entryModule), tsConfigPath, skipCodeGeneration: false, sourceMap: !!isAnySourceMapEnabled, additionalLazyModuleResources: additionalLazyModuleResources, compilerOptions: { paths: compilerOptions.paths } }); let sourceMapFilename = nsWebpack.getSourceMapFilename( hiddenSourceMap, __dirname, dist ); const itemsToClean = [`${dist}/**/*`]; if (platform === 'android') { itemsToClean.push( `${join( projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots' )}` ); itemsToClean.push( `${join( projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot' )}` ); } const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigName); // Shut up typeorm and nativescript-sqlite warnings externals.push('module'); externals.push('typeorm-aurora-data-api-driver'); externals.push('sqlite3'); externals.push('sql.js'); externals.push('redis'); externals.push('react-native-sqlite-storage'); externals.push('pg-query-stream'); externals.push('pg-native'); externals.push('pg'); externals.push('oracledb'); externals.push('nativescript-sqlite-sync'); externals.push('nativescript-sqlite-encrypted'); externals.push('nativescript-sqlite-commercial'); externals.push('mysql2'); externals.push('mysql'); externals.push('mssql'); externals.push('mongodb'); externals.push('ioredis'); externals.push('hdb-pool'); externals.push('better-sqlite3'); externals.push('@sap/hana-client'); nsWebpack.processAppComponents(appComponents, platform); const config = { mode: production ? 'production' : 'development', context: appFullPath, externals, watchOptions: { ignored: [ appResourcesFullPath, // Don't watch hidden files '**/.*' ] }, target: nativescriptTarget, entry: entries, output: { pathinfo: false, path: dist, sourceMapFilename, libraryTarget: 'commonjs2', filename: '[name].js', globalObject: 'global', hashSalt }, resolve: { extensions: ['.ts', '.js', '.scss', '.css'], // Resolve {N} system modules from @nativescript/core modules: [ resolve(__dirname, 'node_modules/@nativescript/core'), resolve(__dirname, 'node_modules'), 'node_modules/@nativescript/core', 'node_modules' ], alias: { '~/package.json': resolve(projectRoot, 'package.json'), '~': appFullPath, "tns-core-modules": "@nativescript/core", "nativescript-angular": "@nativescript/angular", ...fileReplacements }, symlinks: true, // Again typeorm requires stuff not in nativescript mainFields: ['browser', 'module', 'main'], }, resolveLoader: { symlinks: false }, node: { // Disable node shims that conflict with NativeScript http: false, timers: 'empty', setImmediate: false, fs: 'empty', __dirname: false }, devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none', optimization: { runtimeChunk: 'single', noEmitOnErrors: noEmitOnErrorFromTSConfig, splitChunks: { cacheGroups: { vendor: { name: 'vendor', chunks: 'all', test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; return ( /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some(comp => comp === moduleName) ); }, enforce: true } } }, minimize: !!uglify, minimizer: [ new TerserPlugin({ parallel: true, cache: !ci, sourceMap: isAnySourceMapEnabled, terserOptions: { output: { comments: false, semicolons: !isAnySourceMapEnabled }, compress: { // The Android SBG has problems parsing the output // when these options are enabled collapse_vars: platform !== 'android', sequences: platform !== 'android', // custom drop_console: true, drop_debugger: true, ecma: 6, keep_infinity: platform === 'android', // for Chrome/V8 reduce_funcs: platform !== 'android', // for Chrome/V8 global_defs: { __UGLIFIED__: true } }, // custom ecma: 6, safari10: platform !== 'android' } }) ] }, module: { rules: [ { include: join(appFullPath, entryPath), use: [ // Require all Android app components platform === 'android' && { loader: '@nativescript/webpack/helpers/android-app-components-loader', options: { modules: appComponents } }, { loader: '@nativescript/webpack/bundle-config-loader', options: { angular: true, loadCss: !snapshot, // load the application css if in debug mode unitTesting, appFullPath, projectRoot, ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) } } ].filter(loader => !!loader) }, { test: /\.html$|\.xml$/, use: 'raw-loader' }, { test: /[\/|\\]app\.css$/, use: [ '@nativescript/webpack/helpers/style-hot-loader', { loader: "@nativescript/webpack/helpers/css2json-loader", options: { useForImports: true } }, ], }, { test: /[\/|\\]app\.scss$/, use: [ '@nativescript/webpack/helpers/style-hot-loader', { loader: "@nativescript/webpack/helpers/css2json-loader", options: { useForImports: true } }, 'sass-loader', ], }, // Angular components reference css files and their imports using raw-loader { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: 'raw-loader' }, { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ['raw-loader', 'resolve-url-loader', 'sass-loader'] }, { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: [ '@nativescript/webpack/helpers/moduleid-compat-loader', '@nativescript/webpack/helpers/lazy-ngmodule-hot-loader', '@ngtools/webpack' ] }, // Mark files inside `@angular/core` as using SystemJS style dynamic imports. // Removing this will cause deprecation warnings to appear. { test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, parser: { system: true } } ] }, plugins: [ // Define useful constants like TNS_WEBPACK new webpack.DefinePlugin({ 'global.TNS_WEBPACK': 'true', 'global.isAndroid': platform === 'android', 'global.isIOS': platform === 'ios', 'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'), }), // Remove all files from the out dir. new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: itemsToClean, verbose: !!verbose }), // Copy assets new CopyWebpackPlugin([ ...copyTargets, { from: { glob: '**/*.jpg', dot: false } }, { from: { glob: '**/*.png', dot: false } }, ], copyIgnore), new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'), // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), ngCompilerPlugin, // Does IPC communication with the {N} CLI to notify events when running in watch mode. new nsWebpack.WatchStateLoggerPlugin() ], stats: { warningsFilter: [/critical dependency:/i], }, }; if (report) { // Generate report files for bundles content config.plugins.push( new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, generateStatsFile: true, reportFilename: resolve(projectRoot, 'report', `report.html`), statsFilename: resolve(projectRoot, 'report', `stats.json`) }) ); } if (snapshot) { config.plugins.push( new nsWebpack.NativeScriptSnapshotPlugin({ chunk: 'vendor', angular: true, requireModules: [ 'reflect-metadata', '@angular/platform-browser', '@angular/core', '@angular/common', '@angular/router', '@nativescript/angular' ], projectRoot, webpackConfig: config, snapshotInDocker, skipSnapshotTools, useLibs }) ); } if (!production && hmr) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); } return config; };
-
[github issues][https://github.com/apache/cordova-cli/issues/434]
-
Project mention: Tailwind Mobile – Pixel perfect mobile UI components built with Tailwind CSS | news.ycombinator.com | 2021-10-01
-
frida-scripts
A collection of my Frida.re instrumentation scripts to facilitate reverse engineering of mobile apps.
Project mention: 0xdea/frida-scripts - A collection of my Frida.re instrumentation scripts to facilitate reverse engineering of mobile apps. | reddit.com/r/GithubSecurityTools | 2021-10-21 -
Project mention: How to stub a class during unit testing? | reddit.com/r/learnjavascript | 2021-08-09
In this case, the class is defined by a separate plugin (cordova-plugin-file-transfer)--one that is loaded in my production environment, but not in my testing environment.
-
Project mention: using the "Linking" api to open another app | reddit.com/r/reactnative | 2021-10-14
-
Project mention: Aplicação "StayAway Covid" custou 400 mil euros aos contribuintes? Verdadeiro | reddit.com/r/portugal | 2021-03-19
-
mdebug
基于React开发的新一代web调试工具，支持React组件调试，类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React
-
We are producing a white-label mobile app which also runs on Apple devices. It's part of our build chain to modify bespoken Xcode project files. Of great help is this node library which allows automating our build process which includes modifications to the Xcode project file: https://github.com/apache/cordova-node-xcode
-
socketkit
Socketkit is a free open-source alternative to ChartMogul, SensorTower, Google Analytics and Mixpanel.
Project mention: A Free Alternative to ChartMogul, SensorTower, Google Analytics and Mixpanel | news.ycombinator.com | 2021-11-11
JavaScript Mobile related posts
- Developer console in phone? Chrome APP tricks
- I wrote a script to bring Chrome DevTools to Android - works on any site, shake your phone to activate
- Need help finding a good react carousel
- Native-like Navigation of Web apps
- which programming languages do y'all guys prefer as a beginner and why?
- We created an app for the Recommended Routine and we want to share it with the community
- Build a Budget App using Flutter and Appwrite
Index
What are some of the best open-source Mobile projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | awesome-react-native | 30,674 |
| 2 | Swiper | 29,267 |
| 3 | framework7 | 16,523 |
| 4 | Aurelia 1 | 11,665 |
| 5 | eruda | 11,452 |
| 6 | onsenui | 8,499 |
| 7 | Countly | 4,853 |
| 8 | body-scroll-lock | 3,325 |
| 9 | Apache Cordova | 3,280 |
| 10 | keen-slider | 3,034 |
| 11 | cordova-ios | 2,027 |
| 12 | screenshoteer | 1,653 |
| 13 | react-device-detect | 1,648 |
| 14 | nativescript-cli | 1,006 |
| 15 | cordova-cli | 883 |
| 16 | tailwind-mobile | 767 |
| 17 | frida-scripts | 747 |
| 18 | cordova-plugin-file-transfer | 559 |
| 19 | react-native-app-link | 496 |
| 20 | stayaway-app | 463 |
| 21 | mdebug | 192 |
| 22 | cordova-node-xcode | 142 |
| 23 | socketkit | 68 |
Are you hiring? Post a new remote job listing for free.
