JavaScript Mobile

Open-source JavaScript projects categorized as Mobile | Edit details

Top 23 JavaScript Mobile Projects

  • GitHub repo awesome-react-native

    Awesome React Native components, news, tools, and learning material!

    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
  • GitHub repo Swiper

    Most modern mobile touch slider with hardware accelerated transitions

    Project mention: 5 Modern JS Sliders for 2022 | dev.to | 2021-11-27

    SwiperJS

  • Nanos

    Run Linux Software Faster and Safer than Linux with Unikernels.

  • GitHub repo framework7

    Full featured HTML framework for building iOS & Android apps

    Project mention: Native-like Navigation of Web apps | news.ycombinator.com | 2021-11-21
  • GitHub repo Aurelia 1

    The Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia. (by aurelia)

  • GitHub repo eruda

    Console for mobile browsers

    Project mention: Developer console in phone? Chrome APP tricks | dev.to | 2021-11-27

    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.

  • GitHub repo 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.

    Project mention: Native-like Navigation of Web apps | news.ycombinator.com | 2021-11-21
  • GitHub repo 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-25

    Countly (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.

  • GitHub repo body-scroll-lock

    Body scroll locking that just works with everything 😏

    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

  • GitHub repo Apache Cordova

    Apache Cordova Android

    Project mention: Advanced Roadmap for React.js developers | dev.to | 2021-11-25
  • GitHub repo keen-slider

    The HTML touch slider carousel with the most native feeling

    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

  • GitHub repo cordova-ios

    Apache Cordova iOS

    Project mention: Adding an Apple Watch App or Widget to Cordova | dev.to | 2021-04-16

    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.

  • GitHub repo screenshoteer

    Make website screenshots and mobile emulations from the command line.

    Project mention: Screenshoteer - Makes web screenshots and mobile emulations from the command line. | dev.to | 2021-02-01

    Github: https://github.com/vladocar/screenshoteer

  • GitHub repo react-device-detect

    Detect device, and render view according to detected device type.

    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

  • GitHub repo nativescript-cli

    Command-line interface for building NativeScript apps

    Project mention: NativeScript, Databases, and You | dev.to | 2021-05-11

    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 repo cordova-cli

    Apache Cordova CLI

    Project mention: Error in Cordova | dev.to | 2021-05-31

    [github issues][https://github.com/apache/cordova-cli/issues/434]

  • GitHub repo tailwind-mobile

    Mobile UI components made with Tailwind CSS

    Project mention: Tailwind Mobile – Pixel perfect mobile UI components built with Tailwind CSS | news.ycombinator.com | 2021-10-01
  • GitHub repo 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
  • GitHub repo cordova-plugin-file-transfer

    Apache Cordova Plugin file-transfer

    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.

  • GitHub repo stayaway-app

    Official repository for the STAYAWAY COVID mobile application

    Project mention: Aplicação "StayAway Covid" custou 400 mil euros aos contribuintes? Verdadeiro | reddit.com/r/portugal | 2021-03-19
  • GitHub repo mdebug

    基于React开发的新一代web调试工具,支持React组件调试,类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React

    Project mention: Mobile web debugging tool developed based on react | dev.to | 2021-08-26
  • GitHub repo cordova-node-xcode

    Apache cordova

    Project mention: The joys of creating Xcode project files | news.ycombinator.com | 2021-04-25

    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

  • GitHub repo 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
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-11-27.

JavaScript Mobile related posts

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
Find remote jobs at our new job board 99remotejobs.com. There are 34 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com